JavaScript dom操作-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_85545586/article/details/143456596

dom获取节点：

1. getElementsByTagName 通过标签名来获取节点

<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>

    <script>

        // getElementsByTagName 通过标签名来获取节点 （若有多个相同标签，返回含有多个节点的类数组对象）
        const p1 = document.getElementsByTagName("p");  
        console.log(p1);
        console.log(p1[0]);
        console.log(p1[1]);

控制台输出：

2. getElementsByClassName 通过class名来获取节点

 // getElementsByClassName 通过class名来获取节点（若有多个相同class，返回含有多个节点的类数组对象）
        const p2 = document.getElementsByClassName("pp");
        console.log(p2);
        console.log(p2[0]);
        console.log(p2[1]);
        console.log(p2[2]);

3. getElementById 通过id名来获取节点

// getElementById 通过id名来获取节点（直接返回可操控的节点）
        const p3 = document.getElementById("p3");
        console.log(p3);

4. querySelectorAll 通过CSS选择器获取节点

// querySelectorAll 通过CSS选择器获取节点，返回NodeList对象（包含所有匹配给定选择器的节点）
        const p4 = document.querySelectorAll(".pp");
        console.log(p4);
        console.log(p4[0]);
        console.log(p4[1]);
        console.log(p4[2]);

5.querySelector 通过CSS选择器获取节点

 // querySelector 通过CSS选择器获取节点，返回第一个匹配上的节点
        const p5 = document.querySelector(".pp");
        console.log(p5);

dom节点的属性修改

实验1

<body>
    <p class="pp">我是段落1</p>
    <p class="pp">我是段落2</p>


    <p class="pp" id="p3">我是段落3</p>

    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <img src="./img_src/logo.png" alt="图片加载失败" id="img1">

    <script>



        // 【实验一.  查看属性和修改属性】
        // 1.根据id获取节点 
        const p = document.getElementById("p3");
        console.log(p);
        // 2.查看标签节点的属性
        console.log(p.id);
        console.log(p.className);
        // 3.修改节点的id属性
        p.id = "_p_3";
        console.log(p.id);
        // 4.修改节点的class属性
        p.className = "pp jj yy xx";
        console.log(p.className);

控制台输出：

实验2

 // 【实验二.  classList对象的操作】
        // 根据id获取节点
        const p4 = document.getElementById("p4");
        console.log(p4.classList);
        console.log(p4.classList[0]);
        // 为classList添加一个新的class名
        p4.classList.add("zz");
        console.log(p4.classList);
        // 为classList移除一个class名
        p4.classList.remove("xx");
        console.log(p4.classList);
        // 检查classList中是否存在某个class名，返回布尔值。
        console.log(p4.classList.contains("jj"));
        console.log(p4.classList.contains("zz"));

控制台输出

实验3

 // 【实验三.  其他属性的查看与修改（以<img>标签为例）】
        const i = document.getElementById("img1");  
        console.log("修改前:"+ i.src);
        i.src = "./img_src/logo1.png";    // 修改src属性
        console.log("修改后:"+ i.src);

dom创建节点

body>
    <p class="pp"> 我是段落2</p>
    <p class="pp" id="p3">我是段落3</p>
    <p class="pp jj yy xx" id="p4">我是段落4</p>

    <script>
    // 1.1 创建一个<p>标签节点
 var p4 = document.createElement("p");
  // 1.2 创建一个文本节点
  var t4 = document.createTextNode("我是段落5");
        console.log(t4);
  // 2. 插入节点
 // 2.1 将文本节点作为子节点，加入新建的<p>标签节点下面
         p4.appendChild(t4);  
       //  2.2 将已经配置号的<p>标签节点，作为子节点，插入body节点中
         const body_node = document.getElementsByTagName("body")[0];
         body_node.appendChild(p4);

    </script>
</body>

控制台输出

dom修改css样式


    <style>
        .box{
            width: 50%;
            height: 200px;
            color:blue;
            background-color: aliceblue;
            
        }
    </style>
</head>
<body>
    <div class="box"  id="div1">利用js修改CSS样式</div>
    <script>
        var e = document.getElementById("div1");

        // 方式1:  我自己更常用，觉得更清晰
        e.style.backgroundColor = "red";
        e.style.color = "white";
        e.style.fontSize = "30px";

        // 方式2:  直接修改该节点的CSS代码
        // 利用反引号来解决过长字符串的换行问题，以提高阅读性
        // 如何在键盘中输入反引号：英文输入法下，按左上角那个键
        e.style.cssText = 
        `
            background-color: gray; 
            color:green;
            font-size: 50px;
        `;


    </script>
</body>