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>