day26 节点操作——查找节点

最新推荐文章于 2024-09-29 11:29:55 发布

亦昭昭

最新推荐文章于 2024-09-29 11:29:55 发布

阅读量619

点赞数 23

分类专栏：记录前端学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/z240113765/article/details/135894301

版权

记录前端学习专栏收录该内容

44 篇文章 0 订阅

订阅专栏

DOM节点

DOM节点：
- DOM树里每一个内容都称之为节点
节点类型：
- 元素节点：所有的标签，比如body、div
  html是根节点
- 属性节点：所有的属性，比如href、class
- 文本节点：所有的文本
- 其他

查找节点

根据节点关系查找目标节点
节点关系：针对的找亲戚返回的都是对象
- 父节点
- 子节点
- 兄弟节点

父节点查找

parentNode属性
返回最近一级的父节点，找不到返回为null

示例：
在这里插入图片描述

<body>
    <div class="grandpa">
        <div class="dad">
            <div class="baby"></div>
        </div>
    </div>
    <script>
        const baby = document.querySelector('.baby')
        console.log(baby);//返回DOM对象
        console.log(baby.parentNode);//返回DOM对象
        console.log(baby.parentNode.parentNode);//返回DOM对象
    </script>
</body>

子节点查找

childNodes（不常用）
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
children属性（常用）
- 仅获得所有元素节点
- 返回的还是一个伪数组

示例：
在这里插入图片描述

<body>
    <ul>
        <li>
            <p>one 第一段</p>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        const ul = document.querySelector('ul')
        console.log(ul.children);
    </script>
</body>

兄弟关系查找

下一个兄弟节点
- nextElementSibling属性
上一个兄弟节点
- previousElementSibling属性

在这里插入图片描述

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // const ul = document.querySelector('ul')
        // console.log(ul.children);
        const li2 = document.querySelector('ul li:nth-child(2)')
        console.log(li2.previousElementSibling);
        console.log(li2.nextElementSibling);
    </script>
</body>