JS DOM获取兄弟和子元素节点

最新推荐文章于 2024-08-15 23:54:05 发布

OGoodness

最新推荐文章于 2024-08-15 23:54:05 发布

阅读量3.8k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_46275230/article/details/124235525

版权

JSDOM DOM操作子节点兄弟节点父节点

关键词由CSDN通过智能技术生成

JS 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

JS DOM获取兄弟和子元素节点

文章目录

JS DOM获取兄弟和子元素节点

children 和 childNodes

1.children 返回子标签集合
2.childNodes 返回子节点集合

<body>
  <div class="wrap">
    <p>小情歌</p>
    <p>小情歌</p>
  </div>
  <script>
    let oWrap = document.querySelector(".wrap")
    console.log(oWrap.children);
    console.log(oWrap.childNodes);
  </script>
</body>

children 结果

请添加图片描述

childNodes 结果:

请添加图片描述

firstChild 和 firstElementChild

1.firstChild :返回第一个子节点
2.firstElementChild :返回第一个子标签

<body>
	//p标签前有空格!!!
  <div class="wrap"> <p>小情歌</p><p>小情歌</p></div>
  <script>
    let oWrap = document.querySelector(".wrap")
    console.log(oWrap.firstChild);
    console.log(oWrap.firstElementChild);
  </script>
</body>

firstChild 结果:

请添加图片描述

firstElementChild 结果:

请添加图片描述

lastChild 和 lastElementChild

1.lastChild 返回最后一个子节点
2.lastElementChild 返回最后一个子标签

<body>
  <div class="wrap">
    <p>小情歌</p>
    <p>小情歌</p>
  </div>
  <script>
    let oWrap = document.querySelector(".wrap")
    console.log(oWrap.lastChild);
    console.log(oWrap.lastElementChild);
  </script>
</body>
>lastChild

lastChild 结果:

请添加图片描述

lastElementChild 结果:

请添加图片描述

parentNode 和 parentElement

都是获取父标签

<body>
  <div class="wrap">
    <p>小情歌</p>
    <p>小情歌</p>
  </div>
  <script>
    let oWrap = document.querySelector("p")
    console.log(oWrap.parentNode);
    console.log(oWrap.parentElement);
  </script>
</body>

请添加图片描述

nextSibling 和 nextElementSibling

nextSibling 获取下一个兄弟节点
nextElementSibling 获取下一个兄弟元素

<body>
  <div class="wrap">
    <p>张三</p>
    <p>李四</p>
  </div>
  <script>
    let oWrap = document.getElementsByTagName("p")[0]
    console.log(oWrap.nextSibling);
    console.log(oWrap.nextElementSibling);
  </script>
</body>

nextSibling 结果:

nextElementSibling 结果:

请添加图片描述

previousSibling 和 previousElementSibling

previousSibling 返回上一个兄弟节点
previousElementSibling 返回上一个兄弟元素

<body>
  <div class="wrap">
    <p>张三</p>
    <p>李四</p>
  </div>
  <script>
    let oWrap = document.getElementsByTagName("p")[1]
    console.log(oWrap.previousSibling);
    console.log(oWrap.previousElementSibling);
  </script>
</body>