DOM 的作用是将网页转为一个 JavaScript 对象, 从而可以使用 JavaScript 对网页进行各种操作(比如增删内容). 浏览器会根据 DOM 模型, 将 html 文档解析成一系列的节点, 再由这些节点组成一个树状结构.
DOM 的最小组成单位叫做节点 (node), 文档的树形结构(DOM 树) 由 12 种类型的节点组成.
1, 元素节点
元素节点 element 对应网页的 HTML 标签元素. 元素节点的节点类型 nodeType 值是 1, 节点名称 nodeName 值是大写的标签名, nodeValue 值是 null
以 body 元素为例
- // 1 'BODY' null
- console.log(document.body.nodeType,document.body.nodeName,document.body.nodeValue)
- console.log(Node.ELEMENT_NODE === 1);//true
2, 属性节点
元素特性节点 attribute 对应网页中 HTML 标签的属性, 它只存在于元素的 attributes 属性中, 并不是 DOM 文档树的一部分. 特性节点的节点类型 nodeType 值是 2, 节点名称 nodeName 值是属性名, nodeValue 值是属性值
现在, div 元素有 id="test" 的属性
- <div id="test">
- </div>
- <script>
- var attr = test.attributes.id;
- //2 'id' 'test'
- console.log(attr.nodeType, attr.nodeName, attr.nodeValue) console.log(Node.ATTRIBUTE_NODE === 2); //true
- </script>
3, 文本节点
文本节点 text 代表网页中的 HTML 标签内容. 文本节点的节点类型 nodeType 值是 3, 节点名称 nodeName 值是'#text',nodeValue 值是标签内容值
现在, div 元素内容为'测试'
- <div id="test">
- 测试
- </div>
- <script>
- var txt = test.firstChild;
- //3 '#text' '测试'
- console.log(txt.nodeType, txt.nodeName, txt.nodeValue) console.log(Node.TEXT_NODE === 3); //true
- </script>
4,CDATA 节点
CDATASection 类型只针对基于 xml 的文档, 只出现在 xml 文档中, 表示的是 CDATA 区域, 格式一般为
<![CDATA[ ]]>
该类型节点的节点类型 nodeType 的值为 4, 节点名称 nodeName 的值为'#cdata-section',nodevalue 的值是 CDATA 区域中的内容
5, 实体引用名称节点
实体是一个声明, 指定了在 xml 中取代内容或标记而使用的名称. 实体包含两个部分, 首先, 必须使用实体声明将名称绑定到替换内容. 实体声明是使用 <!ENTITY name "value"> 语法在文档类型定义 (DTD) 或 xml 架构中创建的. 其次, 在实体声明中定义的名称随后将在 xml 中使用. 在 xml 中使用时, 该名称称为实体引用.
实体引用名称节点 entry_reference 的节点类型 nodeType 的值为 5, 节点名称 nodeName 的值为实体引用的名称, nodeValue 的值为 null
- // 实体名称
- <!ENTITY publisher "Microsoft Press">
- // 实体名称引用
- <pubinfo>Published by &publisher;</pubinfo>
6, 实体名称节点
该节点的节点类型 nodeType 的值为 6, 节点名称 nodeName 的值为实体名称, nodeValue 的值为 null
7, 处理指令节点
处理指令节点 ProcessingInstruction 的节点类型 nodeType 的值为 7, 节点名称 nodeName 的值为 target,nodeValue 的值为 entire content excluding the target
8, 注释节点
注释节点 comment 表示网页中的 HTML 注释. 注释节点的节点类型 nodeType 的值为 8, 节点名称 nodeName 的值为'#comment',nodeValue 的值为注释的内容
现在, 在 id 为 myDiv 的 div 元素中存在一个<!-- 我是注释内容 -->
- <div id="myDiv">
- <!-- 我是注释内容 -->
- </div>
- <script>
- var com = myDiv.firstChild;
- //8 '#comment' '我是注释内容'
- console.log(com.nodeType, com.nodeName, com.nodeValue) console.log(Node.COMMENT_NODE === 8); //true
- </script>
9, 文档节点
文档节点 document 表示 HTML 文档, 也称为根节点, 指向 document 对象. 文档节点的节点类型 nodeType 的值为 9, 节点名称 nodeName 的值为'#document',nodeValue 的值为 null
- <script>
- //9 "#document" null
- console.log(document.nodeType, document.nodeName, document.nodeValue) console.log(Node.DOCUMENT_NODE === 9); //true
- </script>
10, 文档类型节点
文档类型节点 DocumentType 包含着与文档的 doctype 有关的所有信息. 文档类型节点的节点类型 nodeType 的值为 10, 节点名称 nodeName 的值为 doctype 的名称, nodeValue 的值为 null
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <script>
- var nodeDocumentType = document.firstChild;
- //10 "html" null
- console.log(nodeDocumentType.nodeType, nodeDocumentType.nodeName, nodeDocumentType.nodeValue);
- console.log(Node.DOCUMENT_TYPE_NODE === 10);
- </script>
- </body>
- </HTML>
11, 文档片段节点
文档片段节点 DocumentFragment 在文档中没有对应的标记, 是一种轻量级的文档, 可以包含和控制节点, 但不会像完整的文档寻亲战胜额外的资源.
该节点的节点类型 nodeType 的值为 11, 节点名称 nodeName 的值为'#document-fragment',nodeValue 的值为 null
- <script>
- var nodeDocumentFragment = document.createDocumentFragment();
- //11 "#document-fragment" null
- console.log(nodeDocumentFragment.nodeType, nodeDocumentFragment.nodeName, nodeDocumentFragment.nodeValue);
- console.log(Node.DOCUMENT_FRAGMENT_NODE === 11); //true
- </script>
12,DTD 声明节点
DTD 声明节点 notation 代表 DTD 中声明的符号. 该节点的节点类型 nodeType 的值为 12, 节点名称 nodeName 的值为符号名称, nodeValue 的值为 null
来源: http://www.css88.com/qa/javascript/11538.html