您的位置：首页 > Web前端 > Node.js

DOM中的节点类型

2016-09-18 22:36 393 查看

因为文档对象是由节点组成，而节点又包括：标签节点，属性节点，文本节点，注释节点

如何来区别这些节点的类型呢？需要使用nodeType,节点除了有nodeType，还有nodeName，nodeValue

先来看下父节点和子节点

parentNode 获取父节点（或者是父元素），节点与元素是等价的

childNodes 是DOM的标准属性，不但可以获取标签节点，还可以获取标签之间的文本节点（包括空白节点），但是IE8及之前的浏览器会忽略空白文本节点

children不是标准的DOM属性，但是所有的浏览器都支持使用，它只会获取标签节点，而忽略空白的文本节点，非空白的文本节点则不会忽略

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="box">
<ul id="ul">aaa
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<script>
//    获取对象
var ul = document.getElementById("ul");
//    获取ul标签的父元素,parentNode是获取当前标签的父元素
var div = ul.parentNode;

//    获取ul标签下的所有的子节点，有childNodes和children两种方法
//    childNodes是DOM的标准属性，不但可以获取标签节点，还可以获取标签之间的文本节点（包括空白节点），但是IE8及之前的浏览器会忽略空白文本节点,非空白的文本节点则不会忽略
var lis = ul.childNodes;
console.log(lis.length);    <span style="color:#ff0000;">//打印的结果为：9
</span>//    children不是标准的DOM属性，但是所有的浏览器都支持使用，它只会获取标签节点，而忽略文本节点
var liss = ul.children;
console.log(liss.length);   <span style="color:#ff0000;">//打印的结果为：4
</span>
for(var i = 0; i < lis.length; i++) {
console.log(lis[i].nodeType);   //获取节点的类型
console.log(lis[i].nodeName);   //获取节点的名字
console.log(lis[i].nodeValue);  //获取节点的值
}

var box = div.getAttributeNode("class"); //获取div标签的class属性节点;
console.log(box.nodeType);  //获取属性节点的类型
console.log(box.nodeName);  //获取属性节点的名字
console.log(box.nodeValue); //获取属性节点的值

</script>
</body>
</html>

文本节点和标签节点：

属性节点：

总结：

节点	标签	属性	文本
nodeType	1	2	3
nodeName	对应的标签名	对应的属性名	#text
nodeValue	null	对应的属性值	对应的文本值

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： parentNode childNodes children nodeType

相关文章推荐

新的分享

章节导航