DOM详解

标签：

前言

　　DOM（文档对象模型），用来将HTML和XML文档描绘成一个层次化的节点数，允许开发人员添加、删除或修改页面的内容。IE中的DOM对象是通过COM对象的形式实现的，因此IE的DOM对象与JS对象的行为特点并不一致。

节点类型

常见的四个节点类型：Node.ELEMENT_NODE(1)、Node.ATTRIBUTE_NODE(2)、Node.TEXT_NODE(3)、Node.DOCUMENT_NODE(9)。

在IE8-中不能直接访问节点类型名称(Node.ELEMENT_NODE)。在判断节点类型时最好以数字值(1)比较。

1 <div id="div"></div>
2 <script>
3     console.log(document.getElementById(‘div‘).nodeType); // 1
4     console.log(document.getElementById(‘div‘).nodeType == Node.ELEMENT_NODE); // true IE8-中会报错Node未定义
5     console.log(document.getElementById(‘div‘).nodeType == 1); // true
6 </script>

View Code

nodeName：

　　元素节点的nodeName是标签名；

　　属性节点的nodeName是属性名；

　　文本节点的nodeName始终是#text；

　　文档节点的nodeName始终是#document。

1 <div id="div">11</div>
2 <script>
3     console.log(document.getElementById(‘div‘).nodeName); // DIV
4     console.log(document.getElementById(‘div‘).getAttributeNode(‘id‘).nodeName); // id
5     console.log(document.getElementById(‘div‘).childNodes[0].nodeName); // #text
6     console.log(document.nodeName); // #document
7 </script>

View Code

nodeValue：

　　文本节点的nodeValue是文本内容；

　　属性节点的nodeValue是属性值；

　　元素节点的nodeValue是null，

　　文档节点的nodeName是null。

1 <div id="div">11</div>
2 <script>
3     console.log(document.getElementById(‘div‘).nodeValue); // null
4     console.log(document.getElementById(‘div‘).getAttributeNode(‘id‘).nodeValue); // div
5     console.log(document.getElementById(‘div‘).childNodes[0].nodeValue); // 11
6     console.log(document.nodeValue); // null
7 </script>

View Code

NOTE：在通过nodeName来检查是否为某元素时最好先检测nodeType等于1。

节点关系

childNodes：

　　childNodes可以动态执行查询结果，当DOM结构变化时能自动反映出来。

　　可以通过方括号或item()方法来访问childNodes中的某个节点。

 1 <div id="div">
 2     11
 3     <span>11111111</span>
 4     22
 5 </div>
 6 <script>
 7     console.log(document.getElementById(‘div‘).childNodes); // 如下图
 8     console.log(document.getElementById(‘div‘).childNodes[1].nodeType); // 1
 9     console.log(document.getElementById(‘div‘).childNodes.item(1).nodeType); // 1
10     console.log(document.getElementById(‘div‘).childNodes.length); // 3
11     document.getElementById(‘div‘).innerHTML += ‘<span>22222222</span>‘;
12     console.log(document.getElementById(‘div‘).childNodes.length); // 4
13 </script>

View Code

　　如图所示：后添加一个span也能动态的显示在childNodes中。

parentNode：父节点

previousSibling：上一个兄弟节点（上一个没有就是null）

nextSibling：下一个兄弟节点（下一个没有就是null）

firstChild：第一个子节点(没有子节点为null)

lastChild：最后一个子节点(没有子节点为null)

hasChildNodes：有一个或多个子节点时返回true，比查询childNodes.length更高效。

 1 <div id="div1"></div>
 2 <div id="div2"> </div>
 3 <div id="div3">
 4 
 5 
 6 </div>
 7 <script>
 8     console.log(document.getElementById(‘div1‘).hasChildNodes()); // false
 9     console.log(document.getElementById(‘div2‘).hasChildNodes()); // true   IE8- false(在IE8-空文本不会当作节点,标准浏览器是节点)
10     console.log(document.getElementById(‘div3‘).hasChildNodes()); // true   IE8- false(在IE8-空文本不会当作节点,标准浏览器是节点)
11 </script>

View Code

ownerDocument：该属性指向文档节点。当访问文档节点时可以通过节点的这个属性来查找提升效率。

1 <div id="div1"></div>
2 <script>
3     console.log(document.getElementById(‘div1‘).ownerDocument); // #document
4 </script>

View Code

DOM详解

标签：

原文地址：http://www.cnblogs.com/tyxloveyfq/p/4330720.html