带你彻底学会JS DOM技术之删除，复制，替换元素

2022-12-08 70

简介： 参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。 1或true：表示复制元素本身以及复制该元素下的所有子元素。 0或false：表示仅仅复制元素本身，不复制该元素下的子元素。

+关注继续查看

1.删除元素

在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素

A.removeChild(B);

A表示父元素，B表示父元素内部的某个子元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IMUSTCTF</title>
    <script src="js/index.js"></script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>VUE</li>
    </ul>
    <input type="button" id="btn" value="删除最后一个"/>
</body>
</html>

window.onload=function() {
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function() {
        var oUl = document.getElementById("list");
        oUl.removeChild(oUl.lastElementChild);
    }
}

页面点击删除元素后，会删除页面列表的最后一项：

2.复制元素

在JavaScript中，我们可以使用cloneNode()方法来实现复制元素

obj.cloneNode(bool)

参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。

1或true：表示复制元素本身以及复制该元素下的所有子元素。

0或false：表示仅仅复制元素本身，不复制该元素下的子元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>IMUSTCTF</title>
    <script src="js/index.js"></script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
        <li>VUE</li>
    </ul>
    <input type="button" id="btn" value="复制列表"/>
</body>
</html>

window.onload=function() {
    var oBtn = document.getElementById("btn");
    oBtn.onclick = function() {
        var oUl = document.getElementById("list");
        document.body.appendChild(oUl.cloneNode(1));
    }
}

点击复制后，会对整个列表进行复制：

3.替换元素

在JavaScript中，我们可以使用replaceChild()方法来实现替换元素

A.replaceChild(new,old);

A表示父元素，new表示新子元素，old表示旧子元素

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         window.onload=function()
         {
             var oBtn=document.getElementById("btn");
             oBtn.onclick=function()
             {
                //获取body中的第1个元素
                var oFirst=document.querySelector("body *:first-child");
                //获取2个文本框
                var oTag=document.getElementById("tag");
                var oTxt=document.getElementById("txt");
                //根据2个文本框的值来创建一个新节点
                var oNewTag=document.createElement(oTag.value);
                var oNewTxt=document.createTextNode(oTxt.value);
                oNewTag.appendChild(oNewTxt);
                document.body.replaceChild(oNewTag,oFirst);
             }
         }
    </script>
</head>
<body>
    <p>JavaScript</p>
    <hr/>
    输入标签：<input id="tag" type="text" /><br />
    输入内容：<input id="txt" type="text" /><br />
  <input id="btn" type="button" value="替换" />
</body>
</html>

文本框中输入信息，点击替换，结果如下