30DOM查询（获取元素节点的子节点、父节点、兄弟节点）——js基础

最新推荐文章于 2024-06-25 17:54:49 发布

StudiousTiger

最新推荐文章于 2024-06-25 17:54:49 发布

阅读量473

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_45067620/article/details/107859133

版权

Tiger の JavaScript-基础专栏收录该内容

47 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        获取元素（标签）节点的子节点
            通过具体的元素节点调用
                -getElementByTagName()  见P28的（53、54）、（64、65）行
                    方法，返回当前节点的指定标签名后代节点
                    
                -childNodes
                    属性，表示当前节点的所有子节点(包括空白文本)，会获取包括文本节点在内的所有子节点
                    根据DOM标准，标签之间的空白也会当成一个文本节点
                    注意：在IE8及其以下的浏览器中，不会讲空白文档当成子节点
                -children   见P28的（75、76）行
                    属性，可以获取当前元素的所有子元素，解决了childNode带来的不便
               
                -firstChild
                    属性，表示当前节点定的第一个子节点(包括空白文本)
                -firstElementChild  不兼容IE8及其以下的版本
                    属性，可以获取当前元素的第一个子元素，

                -lastChild
                    属性，表示当前节点的最后一个子节点(包括空白文本)
                -lastElementChild  不兼容IE8及其以下的版本
                    属性，可以获取当前元素的最后一个子元素，
     -->
     <!-- 
        获取元素的父节点和兄弟节点
            通过具体的节点调用
            1.parentNode  (P28 85行)
                -属性，表示当前节点的父节点
            2.previousSibling
                -属性，表示当前节点的前一个兄弟节点(包括空白文本)
              previousElementSibling  (IE8及其以下的不兼容)
            3.nextSibling
                -属性，表示当前节点的后一个兄弟节点(包括空白文本)
              nextElementSibling  (IE8及其以下的不兼容)
      -->
</body>
</html>