转载

DOM节点类型

DOM定义

DOM(文档对象模型)脱胎于Netscape及微软创始的DHTML(动态HTML)，是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

节点树定义

DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型，每种类型分别表示文档中不同的信息或标记。每个节点都拥有各自的特点、数据和方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的节点树。

【根节点及文档元素】

文档节点是每个文档的根节点，<html>元素是文档节点的子节点，被称之为文档元素。文档元素是文档的最外层元素，每个文档只能有一个文档元素。在HTML页面中，文档元素始终是<html>元素。在XML中，没有预定义的元素，因此任何元素都可能成为文档元素。

节点类型

DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。这个Node接口在JavaScript中是作为Node类型实现的，而在IE8-浏览器中的所有DOM对象都是以COM对象的形式实现的。

[注意]IE8-不支持访问到DOM中的NODE类型，但支持数字值写法

//在IE8-返回undefined console.log(Node.ELEMENT_NODE) //在所有浏览器中都返回true <div class="box" id="box"></div> <script> var oBox = document.getElementById('box'); console.log(oBox.nodeType == 1) </script>

【12种节点类型】每个节点都有一个NodeType属性，用于表明节点的类型。节点类型在Node类型中定义下列12个数值常量来表示。

Node.ELEMENT_NODE(1); Node.ATTRIBUTE_NODE(2); Node.TEXT_NODE(3); Node.CDATA_SECTION_NODE(4); Node.ENTRY_REFERENCE_NODE(5); Node.ENTITY_NODE(6); Node.PROCESSING_INSTRUCTION_NODE(7); Node.COMMENT_NODE(8); Node.DOCUMENT_NODE(9); Node.DOCUMENT_TYPE_NODE(10); Node.DOCUMENT_FRAGMENT_NODE(11); Node.NOTATION_NODE(12);

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Document</title> </head> <body> <!-- 注释 --> <div class="box" id="box">123</div> <script> //【1】元素节点 var nodeElement = document.body; console.log(nodeElement.nodeType,nodeElement.nodeType==Node.ELEMENT_NODE);//1 true //【2】元素特性在DOM中以Attr类型表示，是存在于元素的attributes属性中的节点，但却不是DOM文档树的一部分。 var nodeAttribute = document.getElementById("box").attributes[0] ; console.log(nodeAttribute.nodeType,nodeAttribute.nodeType == Node.ATTRIBUTE_NODE)//2 true //【3】文本节点 var nodeText = document.body.firstElementChild.firstChild; console.log(nodeText.nodeType,nodeText.nodeType == Node.TEXT_NODE)//3 true //【4】CDATASection类型只针对基于XML的文档，只出现在XML文档中，表示的是CDATA区域 //【5】ENTITY_REFERENCE_NODE 实体引用名称节点 //【6】ENTITY_NODE 实体名称节点 //【7】PROCESSING_INSTRUCTION_NODE 处理指令节点 //【8】注释节点 var nodeComment = document.body.childNodes[1]; console.log(nodeComment.nodeType,nodeComment.nodeType == Node.COMMENT_NODE)//8 true //【9】文档节点 var nodeDocument = document; console.log(nodeDocument.nodeType,nodeDocument.nodeType==Node.DOCUMENT_NODE);//9 true //【10】文档类型节点 var nodeDocumentType = document.firstChild; console.log(nodeDocumentType.nodeType,nodeDocumentType.nodeType==Node.DOCUMENT_TYPE_NODE);//10 true //【11】DocumentFragment文档片段类型在文档中没有对应的标记，是一种轻量级的文档。 var nodeDocumentFragment = document.createDocumentFragment(); console.log(nodeDocumentFragment.nodeType,nodeDocumentFragment.nodeType == Node.DOCUMENT_FRAGMENT_NODE)//11 true //【12】NOTATION_NODE DTD中声明的符号 </script> </body> </html>