JS中DOM的增、删、改（含练习实例及思路）

最新推荐文章于 2025-04-03 15:21:48 发布

原创最新推荐文章于 2025-04-03 15:21:48 发布 · 362 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

JS基础学习专栏收录该内容

78 篇文章

订阅专栏

这篇博客介绍了JavaScript中DOM操作的基本方法，包括如何使用document.createElement()创建元素节点，document.createTextNode()创建文本节点，appendChild()、insertBefore()、replaceChild()进行节点的添加、插入和替换，以及removeChild()删除节点。文章还强调了在进行DOM操作时可能对父节点造成的影响，并建议结合innerHTML属性使用以减少不必要的父节点刷新。

创建元素节点，document.createElement() 可以用来创建一个元素节点对象，这个方法需要一个标签名作为参数，根据标签名来创建元素节点对象，并将创建好的对象作为返回值返回。
- 例如创建一个li元素节点：

var li = document.createElement("li");

创建文本节点，document.createTextNode()，可以用来创建一个文本节点对象，需要一个文本内容作为参数，根据文本内容创建节点，并将创建的节点返回。
- 例如创建一个名为”广州“的文本节点

var gzText = document.createTextNode("广州");

将一个节点设置为另一个节点的子节点，appendChild()，可以向一个父节点中添加一个新的子节点。

用法：父节点.appendChild(子节点);
- 例如将以上创建的文本节点设置为li节点的子节点

li.appendChild(gzText);

在一个节点前面插入一个新元素节点，insertBefore()，可以在指定的子节点前插入新的节点，这个方法由父节点调用。用法：父节点.insertBefore(新节点，旧节点);
- 例如，将以上的广州节点插入到id为bj的子节点前面，假设他们的父节点是city

city.insertBefore(li,bj)；

用新节点来替换旧节点，replaceChild()，可以用新创建的节点来替换掉原有的节点，此方法由父节点调用，用法：父节点.repaceChild(新节点，旧节点);
- 例如，用以上创建的广州节点来替换掉id为bj的子节点，假设city是他们的父节点

city.replaceChild(li,bj);

删除一个节点，removeChild()，此方法可以删除掉已存在的一个子节点，由父节点嗲用这个方法
- 例如，删除掉city父节点下的id为bj的子节点

city.removeChild(bj);

具体的练习如下：

在看以下代码的时候，要注意一点：使用下面的增、删、改对应的insertBefore()、removeChild()以及replaceChild()，他们对节点进行操作时，会影响到整个父节点，虽然是对个别节点进行操作，但是这几种方法会将原有的父节点删除再重新添加，也就相当于将原有的父节点刷新了一遍。

针对以上问题，可以考虑用innerTHML来与这几种方法结合使用，注意看代码中第一点之后的注释内容，之后的方法也都可以用innerHTML属性来进行相关的操作，避免对父元素的影响。

<!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>
    <link rel="stylesheet" href="css/dom.css"/>
    <script type="text/javascript">
        window.onload = function(){

            //1.创建一个“广州”子节点，并将其添加到id为city的节点下
            myClick("btn1",function(){
                //创建一个名为“广州”的节点<li>广州</li>
                //创建li元素节点
                var li = document.createElement("li");
                //创建广州文本节点
                var gzText = document.createTextNode("广州");
                //将gzText设置为li的子节点
                li.appendChild(gzText);
                //获取id为city的节点
                var city = document.getElementById("city");
                //将“广州”添加到id为city的节点下
                city.appendChild(li);
            });

            /* 
                第一种方法可以改写成如下代码，只会影响到新添加的元素节点，不会对其他节点造成影响，推				  荐这样使用：
                 myClick("btn1",function(){
                     var li = document.createElement("li");
                     li.innerHTML = "广州"；
                     var city = document.getElementById("city");
                     city.appendChild(li);
                 });
            */

            //2.将“广州”这个节点插入到id为bj的节点前面
            myClick("btn2",function(){
                //创建广州节点
                //创建广州节点的li元素
                var li = document.createElement("li");
                //设置广州节点的文本
                var gzText = document.createTextNode("广州");
                //将广州文本节点设置为广州li元素的子节点
                li.appendChild(gzText);
                //获取bj节点
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");
                city.insertBefore(li,bj);
            });

            //3.用“广州”节点替换掉北京节点
            myClick("btn3",function(){
                //创建广州节点
                //创建广州节点的li元素
                var li = document.createElement("li");
                //设置广州节点的文本
                var gzText = document.createTextNode("广州");
                //将广州文本节点设置为广州li元素的子节点
                li.appendChild(gzText);
                var bj = document.getElementById("bj");
                var city = document.getElementById("city");
                city.replaceChild(li,bj);
            });

            //4.清除北京节点
            myClick("btn4",function(){
                var bj = document.getElementById("bj");
                // var city = document.getElementById("city");
                // city.removeChild(bj);

                //直接获取到id为bj的父元素，并删除掉北京节点，这种方法好用，就算不知道id为bj节点的					父节点，也能顺利进行操作
                //这种方法比较常用，用法：子节点.parentNode.removeChild(子节点)
                bj.parentNode.removeChild(bj);//此时的bj.parentNode就是city节点
            });

            //5.读取id为city中的HTML代码
            myClick("btn5",function(){
                var city = document.getElementById("city");
                console.log(city.innerHTML);
            });

            //6.设置id为bj的内部THML代码
            myClick("btn6",function(){
                var bj = document.getElementById("bj");
                bj.innerText = "天津";
            });

            //7.向city中添加广州
            myClick("btn7",function(){
                var city = document.getElementById("city");
                /* 
                    使用innerHTML也能完成DOM的增删改查的相关操作，使用innerHTML方式来操作只会影					响到操作的个别元素，
                    使用前面的方法会影响到整个父元素节点所包含的子元素节点，会将原有的元素节点删掉，					然后在进行添加，
                    对原元素节点的影响较大
                    一般我们会两种方式结合使用，
                */
                city.innerHTML = +"<li>广州</li>";
            });
        };

        function myClick(idStr,fun){
            var idStr = document.getElementById(idStr);
            idStr.onclick = fun;
        }
    </script>
</head>
<body>
    <div class="one">
        <p id="bt">你最想住在哪个城市？</p>
        <ul id="city">
            <li id="bj">北京</li>
            <li id="sh">上海</li>
            <li id="dj">东京</li>
            <li id="sr">首尔</li>
        </ul>
        
    </div>
    <div class="two">
        <input type="button" id="btn1" value="创建“广州”节点，添加到id为city的div中"/>
        <input type="button" id="btn2" value="将“广州”节点插入到北京前面"/>
        <input type="button" id="btn3" value="使用“广州”节点替换掉北京节点"/>
        <input type="button" id="btn4" value="清除北京节点"/>
        <input type="button" id="btn5" value="读取id为city中的HTML代码"/>
        <input type="button" id="btn6" value="设置id为bj的内部HTML代码"/>
        <input type="button" id="btn7" value="使用innerHTML来添加节点"/>
    </div>
</body>
</html>

以上代码中相应的dom.css代码如下：

*{
    margin: 0;
    padding: 0;
}
.one{
    height: 100px;
    width: 400px;
    border: 1px solid black;
    float: left;
    margin-left: 300px;
    margin-top: 50px;
    padding: 15px;
}
.one p{
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}
.one ul li{
    display: inline;
    list-style: none;
    border: 1px solid black;
    background-color: rgb(43, 189, 59);
    margin-right: 5px;
}
.two{
    height: 200px;
    width: 400px;
    float: left;
    margin-top: 50px;
    padding-left: 10px;
}
.two input{
    width: 300px;
    padding: 3px 10px;
    margin-bottom: 6px;
}