【笔记】节点相关

最新推荐文章于 2024-09-14 18:52:56 发布

谢豪杰

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量75

点赞数 2

分类专栏：每日知识文章标签： javascript api

本文链接：https://blog.csdn.net/qq_46580087/article/details/123199663

版权

每日知识专栏收录该内容

57 篇文章 6 订阅

订阅专栏

节点 node ： 网页一切内容皆为节点

节点作用： 让渲染引擎准确的渲染dom树

四种节点：元素节点、属性节点、文本节点、注释节点

最重要：元素节点(标签) 查找元素

querySelector()：查找元素根据选择器查询 (相当于身份证找人)

节点：查找元素根据dom树关系来查找

1.子节点：

获取子元素 : 元素.children 一定是伪数组

获取兄弟元素
获取父元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
</head>

<body>
  <ul>
    <!-- 我是注释哟 -->
    我是文本哈
    <li>我是班长1</li>
    <li>我是班长2</li>
    <li>我是班长3</li>
    <li>我是班长4</li>
    <li>我是班长5</li>
  </ul>

  <script>
    /* 学习目标： 查询节点
        1.获取子元素 :  元素.children
        一定是伪数组
        2.获取兄弟元素
        3.获取父元素
    */

    //获取父元素
    let ul = document.querySelector('ul')
    //1.1 获取子节点
    console.log(ul.childNodes)//获取 元素节点、文本节点、注释节点//13个

    //1.2 获取子元素
    console.log(ul.children)// 获取子元素//5个
    console.log(ul.children[4])//我是班长5

  </script>
</body>

</html>

2.兄弟节点

获取子元素 : 父元素.children
获取兄弟元素 :

获取上一个元素：元素.previousElementSibling

获取下一个元素：元素.nextElementSibling

获取父元素 :

 let li2 = document.querySelector('#li2')//班长2

    //1.获取上一个元素
    console.log(li2.previousElementSibling)//班长1

    //2.获取下一个元素
    console.log(li2.nextElementSibling)//班长3

3.父节点

获取子元素 : 父元素.children
获取兄弟元素 :

获取上一次元素：元素.previousElementSibling

获取下一次元素：元素.nextElementSibling

获取父元素 : 父元素.parentNode

console.log(li2.parentElement)//ul

console.log(li2.parentNode.parentNode)//body
console.log(li2.parentNode.parentNode.parentNode)//html
console.log(li2.parentNode.parentNode.parentNode.parentNode)//document
console.log(li2.parentNode.parentNode.parentNode.parentNode.parentNode)//null 宇宙尽头

父节点的尽头是 null