js:节点

最新推荐文章于 2022-02-16 10:06:08 发布

前端小王*

最新推荐文章于 2022-02-16 10:06:08 发布

阅读量117

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48493160/article/details/109784325

版权

js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

节点介绍

document.a.childNodes
获取a的所有的子节点
包含空格、换行，会被看成文本节点

节点分为文本节点、元素节点、属性节点、注释节点、文档节点等

nodeType属性
元素节点为1、属性节点为2、文本节点为3、注释节点为8、文档节点为9

nodeName属性

元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

nodeValue属性

元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

节点关系

<body>
    <ul id="list"><li>1</li><li>2</li><li id="three">3</li><li>4</li><li>5</li></ul>
    <script>
        // 节点关系就两种： 父子、兄弟
        // 节点关系属性：通过属性可以找到另外的节点 
        var list = document.getElementById("list");
        var three = document.getElementById("three");
        // 父元素
        // 找所有子节点
        console.log(list.childNodes);
        // 第一个子节点
        console.log(list.firstChild);
        //最后一个子节点
        console.log(list.lastChild)


        // 子找父
        console.log(three.parentNode)


        // 找前一个兄弟
        console.log(three.previousSibling.innerHTML);

        // 找后一个兄弟
        console.log(three.nextSibling.innerHTML);

    </script>
</body>