首页 > 代码库 > Javascript之DOM的三大节点及部分用法
Javascript之DOM的三大节点及部分用法
DOM有三种节点：元素节点、属性节点、文本节点。
一、用nodeType可以检测节点的类型
| 节点类型 | nodeType属性值 |
| 元素节点 | 1 |
| 属性节点 | 2 |
| 文本节点 | 3 |
这样方便在js中对各个节点进行操作。
元素节点：html中的标签。
属性节点：html便签中的属性值。
文本节点：元素节点之间的文本。
二、用body的childNodes来测试
1 <body>/*第一个文本元素 2 */<div></div>/*第二个文本元素 3 */<div></div>/*第三个文本元素 4 */<ul> 5 <li></li> 6 <li></li> 7 <li></li> 8 </ul>/*第四个文本元素 9 */</body>
来看body的childNodes中各个节点的个数。
先说一下childNodes，这个属性用来获取任何一个元素的所有子元素，它是一个包含这个元素的全部子元素的数组。
用js测试：
1 window.onload = function (){
2 var oBody = document.getElementsByTagName(‘body‘)[0];
3 var aChild = oBody.childNodes;
4 alert(aChild.length);//7
5 for(var i = 0; i < aChild.length; i++) {
6 alert(aChild[i].nodeType);//3 1 3 1 3 1 3
7 }
8 };
由此看来：
body的子元素有div、div、ul。
body的文本元素有四个，代码中注释出出来的，我故意将*/换了一行写出来，是想表明在<body>和<div>之间是一个文本节点。
有人会觉得疑惑，不是说元素节点之间就是文本节点吗？为什么像<div></div>之间的文本节点没有算进去呢？
对的，那个也算文本节点，但我们计算的是body的子节点，像<div></div>之间的那是<div>的子节点啦，并不是body的子节点。
三、用nodeValue来得到和设置一个节点的值
三大节点中，属性节点和文本节点都是可能有值的，但是元素节点是没有值的。
用node.nodeValue得到node的值，那么有一个问题，nodeValue和innerHTML有什么区别呢？
nodeValue获取的是节点的值，innerHTML是以字符串形式返回该节点的所有子节点及其值。可以看做是部分与大体的一个区别。
举个例子：
1 <body> 2 <div id="div1"> 3 这是div的第一个子节点，是一个文本节点 4 <p>div的第二个子节点p，这是p的第一个文本节点</p> 5 </div> 6 </body>
我们用js来测试一下nodeValue和innerHTML的结果
1 window.onload = function (){
2 var oDiv = document.getElementById(‘div1‘);
3 var aChild = oDiv.childNodes;
4
5 alert(aChild[0].nodeValue);
6 alert(oDiv.innerHTML);
7 };
测试结果如下：
第一个alert弹出“这是div的第一个子节点，是一个文本节点”
第二个alert弹出“这是div的第一个子节点，是一个文本节点 <p>div的第二个子节点p，这是p的第一个文本节点</p>”
三、用nodeName来获取节点的
nodeName属性含有某个节点的名称。
对于元素节点，nodeName=标签名（返回的名称是大写的）。
对于文本节点，nodeName=#text。
对于属性节点，nodeName=属性名（返回的名称是大写的）。
使用方法：elemt.nodeName;
Javascript之DOM的三大节点及部分用法