DOM节点操作案例

风无雨
123 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

DOM节点介绍

DOM节点:DOM树里面的每一个节点都是DOM节点

DOM树如图

image.png

元素节点:(我理解是html中的标签)包括body,div,span

属性节点:(大概就是标签里的属性)像是img标签里的src属性,form标签里的action属性,button中的disabled属性

文本节点:所有文本

查找父节点案例

    // 🏆父节点查找：
    // parentNode 属性
    // 使用:子元素.parentNode
    // 返回的最近的父节点
    // 找爸爸

<html lang="en">

<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="father">父亲
        <div class="son">儿子</div>
    </div>
    <script>
        let son = document.querySelector('.son')
        console.log(son.parentNode);
        // son.parentNode.style.display = "none"//等一下解开
    </script>
</body>

</html>

没解开// son.parentNode.style.display = "none"时的页面显示 image.png

image.png

解开后的页面显示:

image.png

image.png

说明

  • 1.子元素.parentNode能够找到子元素的直接父节点
  • 2.父元素隐藏子元素也会隐藏

🏆查找子节点

父元素.childNodes

获得所有子节点、包括文本节点（空格、换行）、注释节点等

        let ul = document.querySelector("ul")
        console.log(ul.childNodes);

-我们发现由于li换行了所以节点除了li之外还有四个text,这是换行形成的.

image.png image.png

    // children
    // 仅获得所有元素节点
    // 返回的还是一个伪数组
    console.log(ul.children);

image.png

  • 只包含三个li,而不包括text.

使用查找子节点,来随机改变子节点文本颜色案例

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

<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>
    <button>点击变色</button>
    <ul>
        <li>我是第1个孩子</li>
        <li class="two">我是第2个孩子</li>
        <li>我是第3个孩子</li>
    </ul>
    <script>
        let ul = document.querySelector("ul")
        console.log(ul.children);
        // 使用:父元素. children选中所有节点
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
        }
        let btn = document.querySelector(" button")
        let flag = true;
        btn.addEventListener("click", function () {
            if (flag) {
                const red = getRandom(0, 255)
                const green = getRandom(0, 255)
                const blue = getRandom(0, 255)
                for (let i = 0; i < ul.children.length; i++) {
                    btn.innerHTML = `恢复黑色`
                    // console.log(red,green,blue)
                    ul.children[i].style.color = `rgb(${red},${green},${blue}) `
                }
            } else {
                for (let i = 0; i < ul.children.length; i++) {
                    btn.innerHTML = `点击变色`
                    ul.children[i].style.color = "black"
                }
            }
            flag = !flag
        })
    </script>
</body>

</html>

初始效果

image.png

点击后效果:

image.png

🏆查找兄弟节点

  • nextElementSibling下一个兄弟
  • previousElementSibling上一个兄弟
<!DOCTYPE html>
<html lang="en">

<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 class="two">我是第2个孩子</li>
        <li>我是第3个孩子</li>
    </ul>
    <script>
        // 🏆兄弟节点
        two = document.querySelector('.two')
        // nextElementSibling下一个兄弟
        console.log(two.nextElementSibling);
        // previousElementSibling上一个兄弟
        console.log(two.previousElementSibling);
    </script>
</body>

</html>

image.png

  • two的下一个兄弟是第三个孩子
  • two的上一个兄弟是第二个孩子
avatar
文章
阅读
粉丝