DOM中的节点类型

最新推荐文章于 2024-06-05 23:20:10 发布

安静的对折

最新推荐文章于 2024-06-05 23:20:10 发布

阅读量351

点赞数

分类专栏： JS 文章标签： parentNode childNodes children nodeType

本文链接：https://blog.csdn.net/k491022087/article/details/52578768

版权

JS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

如何来区别这些节点的类型呢？需要使用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	对应的属性值	对应的文本值

安静的对折

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM中的节点类型

因为文档对象是由节点组成，而节点又包括：标签节点，属性节点，文本节点，注释节点如何来区别这些节点的类型呢？需要使用nodeType,节点除了有nodeType，还有nodeName，nodeValue先来看下父节点和子节点 parentNode 获取父节点（或者是父元素），节点与元素是等价的 childNodes 是DOM的标准属性，不但可以获取标签
复制链接

扫一扫

专栏目录