JS：DOM操作标签元素_dom元素标签-CSDN博客

本文链接：https://blog.csdn.net/weixin_48475463/article/details/122708353

1. 操作内容_innerText、innerHTML

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        text-align: center;
        font: 24px/100px "宋体";
    }
</style>

<body>
    <div class="box">李沁</div>
     <script>
         var box = document.querySelector(".box");
         box.innerText = "胡莎";
         console.log(box);

         console.log(box.innerHTML); //胡莎
     </script>
</body>

2. 操作属性_固有属性、setAttribute、getAttribute、removeAttribute、style、className、classList

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
        text-align: center;
        font: 24px/100px "宋体";
    }

    .box1 {
        width: 50px;
        height: 50px;
        background-color: cyan;
        text-align: center;
        font: 12px/50px "微软雅黑";
    }
</style>

<body>
    <div id="liqin" class="box" style="border: 2px solid #823;">李沁</div>
    <script>
        var box = document.querySelector(".box");

        //  1.固有属性
        console.log(box.id); //liqin
        console.log(box.style);
        console.log(box.className); //box

        //  2.setAttribute 设置属性   getAttribute 获取属性名  removeAttribute 移除属性
        box.setAttribute("myname", "胡莎");
        console.log(box.getAttribute("myname")); //胡莎

        box.removeAttribute("myname");
        console.log(box.getAttribute("myname")); //null

        // 3.操作样式
        box.style.backgroundColor = "pink";

        // 覆盖式地修改元素的样式（不推荐）
        // box.className = "box1";

        // 增加样式
        box.classList.add("box1");

        // 移除样式
        box.classList.remove("box");

    </script>
</body>