节点属性

最新推荐文章于 2022-08-23 20:37:23 发布

伊人至尚

最新推荐文章于 2022-08-23 20:37:23 发布

阅读量382

点赞数

分类专栏： JavaScripy 文章标签： JavaScripy 节点属性 nodeType nodeName nodeValue

本文链接：https://blog.csdn.net/smileshang1224/article/details/102987411

版权

JavaScripy 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM 节点有三个重要的属性：

nodeName : 节点的名称；它返回一个字符串，其内容是给定节点的名字。是只读属性
nodeValue ：节点的值；这所谓的就是元素，就是给定节点的当前值nodevalue。

nodeType ：节点的类型；它返回的是一个整体，而这个数值代表的给定节点的类型。是只读的。

         节点类型(nodeType)    节点名字(nodeName)    节点值(nodeValue)
元素节点         1                  标签名                 null
文本节点         3                  #text                 文本
注释节点         8                 #comment             注释的文字
文档节点         9                 #document              null
属性节点         2                  属性名                属性值

<body>
    <ul>我是ul里的文字<li id="box" class="abc">我是li里的文字</li><!-- 我是注释 --></ul>
    <script>
        // 1 获取ul
        var ul = document.getElementsByTagName("ul")[0];
        // 2 获取ul的全部子节点
        var childNodes = ul.childNodes;
        // 提示： 空白折叠压缩生成的空白符 会被高级浏览器认为是一个文本节点 IE反而不会有该问题
        for (var i = 0; i < childNodes.length; i++) {
            console.log(childNodes[i].nodeType) //3 1 8
        }
        /* nodeType属性表示节点的类型 总共有12种节点类型 我们需要记忆的 1 元素 2 属性 3 文本 8 注释 9 文档 */

        // 获取文本
        var textNode = childNodes[0];
        // 获取元素
        var elementNode = childNodes[1];
        // 获取注释
        var commetNode = childNodes[2];
        // 获取属性
        var attrNode = elementNode.getAttributeNode("id");
        // 获取文档
        var d = document;

        // 1 nodeType 
        console.log(textNode.nodeType);// 3
        console.log(elementNode.nodeType);// 1
        console.log(commetNode.nodeType); // 8
        console.log(attrNode.nodeType); // 2
        console.log(d.nodeType); // 9

        // 2 nodeName
        console.log(textNode.nodeName); // #text
        console.log(elementNode.nodeName); // 大写的标签名
        console.log(commetNode.nodeName); // #comment
        console.log(attrNode.nodeName); // id
        console.log(d.nodeName); // #document


        // 3 nodeValue
        console.log(textNode.nodeValue); // 文本内容字符串
        console.log(elementNode.nodeValue); // null
        console.log(commetNode.nodeValue); // 注释文本内容字符串
        console.log(attrNode.nodeValue); // 就是属性值
        console.log(d.nodeValue); // null

        // 过滤出所有的文本节点
        for (var i = 0; i < childNodes.length; i++) {
            if (childNodes[i].nodeType == 3) {
                console.log(childNodes[i])
            }
        }
        
        // 过滤出所有的元素节点中的span
        for (var i = 0; i < childNodes.length; i++) {
            if (childNodes[i].nodeName == "LI") {
                console.log(childNodes[i])
            }
        }
    </script>
</body>