WebAPI- DOM节点查找

最新推荐文章于 2024-08-16 19:02:09 发布

HOO00oo

最新推荐文章于 2024-08-16 19:02:09 发布

阅读量131

点赞数

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

本文链接：https://blog.csdn.net/HOO00oo/article/details/116069652

版权

WebAPI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 节点概念

网页一切皆节点

节点：html中所有内容都是节点
元素：也叫元素节点，html中的标签都是元素
节点三要素
- nodeName：节点名字
- nodeValue：节点值
- nodeType：节点类型

元素节点的三个要素的特点： nodeType值为1、nodeName为标签名全大写、nodeValue为 null

2. 查找子节点

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <ul>
            <!-- 这里是li标签 -->
            <li>隔壁老王1</li>
            <li>隔壁老王2</li>
            <li>隔壁老王3</li>
        </ul>
        <script>
            // 获取子节点，先应该拿到父节点
            let ul = document.querySelector("ul");

            // 1. 所有子节点（全部包含）：childNodes
            console.log(ul.childNodes); //一个换行表示一个text节点，一个注释表示一个comment节点，

            // 2. 所有子元素：children
            console.log(ul.children); //不能使用forEach

            // 3. 获取第一个孩子节点：firstChild
            console.log(ul.firstChild);

            // 4. 获取第一个孩子元素：firstElementChild
            console.log(ul.firstElementChild);

            // 5. 最后一个孩子节点：lastChild
            console.log(ul.lastChild);

            // 6. 最后一个孩子元素：lastElementChild
            console.log(ul.lastElementChild);

            // 父节点查找子节点：寻找效率高
        </script>
    </body>
</html>

3. 获取兄弟节点

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <ul>
            <li>隔壁老王1</li>
            <li>隔壁老王2</li>
            <li class="current">隔壁老王3</li>
            <li>隔壁老王4</li>
            <li>隔壁老王5</li>
        </ul>
        <script>
            // 获取目标元素
            let current = document.querySelector(".current");

            // 1. 前一个兄弟节点：previousSibling
            console.log(current.previousSibling);

            // 2. 前一个兄弟元素：previousElementSibling
            console.log(current.previousElementSibling);

            // 3. 后一个兄弟节点：nextSibling
            console.log(current.nextSibling);

            //4. 后一个兄弟元素：nextElementSibling
            console.log(current.nextElementSibling);
        </script>
    </body>
</html>

4. 获取父节点

◆ 父节点：parentNode
◆ 顶级父节点：document
◆ 父元素：parentElement
◆ 顶级父元素：html

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="box">我是小绵羊</div>
        <script>
            let box = document.querySelector(".box");

            //在实际开发中:找节点最多找到body.parentNode和parentElement都没有区别
            // 获取父节点
            console.log(box.parentNode);

            // 获取父元素
            console.log(box.parentElement);

            //二者有区别:找节点,顶级节点是document;    找元素,顶级元素是html
        </script>
    </body>
</html>

总结：

在这里插入图片描述

5. 案例

点击符号，关闭二维码

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .box {
                position: relative;
                width: 107px;
                height: 127px;
                margin: 100px auto;
            }
            span {
                position: absolute;
                width: 22px;
                height: 22px;
                text-align: center;
                left: -24px;
                border: 1px solid #ccc;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span>X</span>
            <img src="images/taobao.jpg" alt="" />
        </div>
        <script>
            // 需求：点击X隐藏图片和按钮本身

            // 1. 获取事件源X
            // 2. 增加点击事件
            // 3. 事件处理：隐藏box父元素
            document.querySelector("span").onclick = function () {
                this.parentElement.style.display = "none";
            };
        </script>
    </body>
</html>

HOO00oo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPI- DOM节点查找

1. 节点概念网页一切皆节点节点：html中所有内容都是节点元素：也叫元素节点，html中的标签都是元素节点三要素nodeName：节点名字nodeValue：节点值nodeType：节点类型元素节点的三个要素的特点： nodeType值为1、nodeName为标签名全大写、nodeValue为 null2. 查找子节点<!DOCTYPE html><html lang="zh-CN"> <head> <met
复制链接

扫一扫