JavaScript-DOM-获取节点父、兄、子节点or元素

最新推荐文章于 2024-03-29 20:26:52 发布

十二啊

最新推荐文章于 2024-03-29 20:26:52 发布

阅读量2.3k

点赞数 1

分类专栏：十二的 Javascript 之路文章标签： javascript

十二

本文链接：https://blog.csdn.net/qq_42543177/article/details/124317510

版权

十二的 Javascript 之路专栏收录该内容

22 篇文章 0 订阅

订阅专栏

JavaScript-DOM-获取节点父、兄、子节点or元素

首先先来解释一下节点与元素的区别，不然真的会看的很懵啊！什么是节点？DOM规定：整个文档是一个文档节点，每个标签就是一个元素节点，也就是我们这里所说的元素，元素包含的文本是文本节点，元素的属性是属性节点，注释属于注释节点，等等这些都称之为节点。那什么是元素？元素就是节点中的元素节点，也就是文档中的标签。

上一篇文章中介绍了document对象访问元素的三种方法。那当我们获取到相应的元素对象后又想获得其父、兄、子节点or元素的信息该当如何获取？那接下来就分别来介绍一下都有哪些方法及属性可以帮我们获取想要的信息。

获取子节点

方法/属性	描述
getElementsByTagName()	返回当前节点的指定标签名后代节点
childNodes	返回当前节点的所有子节点（是一个nodeList类数组对象，使用Array.prototype.slice()方法可以转换为数组，就可以调用数组的相关方法）
firstChild	返回当前节点的首个子节点
lastChild	返回当前节点的最后一个子节点

获取父兄节点

属性	描述
parentNode	返回当前节点的父节点
previousSibling	返回当前节点的前一兄弟节点
nextSibling	返回当前节点的后一兄弟节点

获取子元素

属性	描述
childElementCount	返回当前元素的子元素个数
children	返回当前元素的所有子元素
firstElementChild	返回第一个子元素
lastElementChild	返回最后一个子元素

获取兄弟元素

属性	描述
previousElementSibling	返回当前元素的前一兄弟元素
nextElementSibling	返回当前元素的后一兄弟元素

亲自试一试

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DOM-元素节点示例</title>
        <script>
            window.onload = function(){
                let demo1=document.getElementById('demo1');
                // nextSibling属性获取下一个相邻节点
                let next = demo1.nextSibling;
                // 这里demo1的下一相邻节点为换行，所以打印信息为undefined
                console.log(next.innerText);
                // nextSibling属性获取下一个相邻元素
                let nextElement = demo1.nextElementSibling;
                // 这里demo1的下一相邻节点为换行，所以打印信息为“欲穷千里目”
                console.log(nextElement.innerText);
            }
        </script>
    </head>
    <body>
        <ul>
            <li>白日依山尽</li>
            <li id="demo1">黄河入海流</li>
            <li>欲穷千里目</li>
            <li>更上一层楼</li>
        </ul>
    </body>
</html>