节点/`childNodes`子节点/`previousSibling`兄弟节点`nextSibling`/父亲节点

最新推荐文章于 2023-08-04 08:47:36 发布

喵帕斯_喵太

最新推荐文章于 2023-08-04 08:47:36 发布

阅读量192

点赞数

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

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/116068605

版权

javascript 专栏收录该内容

58 篇文章 2 订阅

订阅专栏

01-节点查找-网页一切皆节点

    <!-- 这是注释 -->
    <div class="box">我是前端小白</div>
    <script>
        // 网页一切皆节点：document也是节点，是顶级节点

        // 节点有三要素：nodeType  nodeName  nodeValue
        console.log(document.nodeType)
        console.log(document.nodeName)
        console.log(document.nodeValue)     // null

        // 元素节点：找到元素
        let box = document.querySelector('.box')
        console.log(box.nodeType, box.nodeName, box.nodeValue)

        // 网页一切皆节点
    </script>

注意：
1.网页一切皆节点：document也是节点，是顶级节点
2.节点有三要素：nodeType nodeName nodeValue
3.元素节点：找到元素

02-节点查找-寻找子节点-`childNodes`

<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)  // 9：包含所有

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

        // 挂载原型方法：可以解决forEach的使用问题
        // HTMLCollection.prototype.forEach = NodeList.prototype.forEach

        // ul.children.forEach(function (li) {
        //     console.log(li)
        // })

        // 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>

03-节点查找-寻找兄弟节点前一个（previous）兄弟（sibling）,下一个（next）兄弟（sibling）

    <style>
        .current {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li>隔壁老王1</li>
        <li>隔壁老王2</li>
        <li class="current">隔壁老王3</li>
        <li>隔壁老王4</li>
        <li>隔壁老王5</li>
    </ul>

    <script>
        // 获取元素
        let li = document.querySelector('.current')

        // 大哥：前一个（previous）兄弟（sibling）
        console.log(li.previousSibling)

        // 兄弟元素
        console.log(li.previousElementSibling)


        // 小弟：下一个（next）兄弟（sibling）
        console.log(li.nextSibling)

        // 兄弟元素
        console.log(li.nextElementSibling)


        // 兄弟只能找前后：但是可以通过连续使用来访问其他兄弟

        // 隔壁老王5
        console.log(li.nextElementSibling.nextElementSibling)

        // 如果没有呢？null：到头了，没有找到
        console.log(li.nextElementSibling.nextElementSibling.nextElementSibling)
    </script>
</body>

注意：
1.兄弟只能找前后：但是可以通过连续使用来访问其他兄弟

04-节点查找-寻找父节点`parentNode`||`parentElement`

    <div class="box">
        我是前端小白
    </div>

    <script>
        // 寻找父节点：parentNode || parentElement
        let box = document.querySelector('.box')

        // 在实际开发中：找节点最多找到body，parentNode和parent Element都没有区别
        console.log(box.parentNode)
        console.log(box.parentElement)

        // 二者有区别：找节点，顶级节点是document；找元素，顶级元素是html
        console.log(box.parentNode.parentNode)
        console.log(box.parentElement.parentElement)

        console.log(box.parentNode.parentNode.parentNode)               // document
        console.log(box.parentElement.parentElement.parentElement)  // null
    </script>

05-节点案例-关闭二维码

    <style>
        .box {
            position: relative;
            width: 107px;
            height: 127px;
            margin: 100px auto;
        }

        .box 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 () {
            // console.log(this)
            this.parentElement.style.display = 'none'
        }
    </script>
</body>

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

06-DOM查找元素图片示例

在这里插入图片描述

喵帕斯_喵太

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
节点/`childNodes`子节点/`previousSibling`兄弟节点`nextSibling`/父亲节点

01-节点查找-网页一切皆节点  <div class="box">我是前端小白</div> <script> // 网页一切皆节点：document也是节点，是顶级节点 // 节点有三要素：nodeType nodeName nodeValue console.log(document.nodeType) console.log(docum
复制链接

扫一扫