DOM的动态创建和删除元素

2024-11-25 来源：个人技术集锦

一、创建节点

1.1、createElement创建

（1）在内存中创建一个DOM对象
(2)、先给这个对象设置样式,用点的方式
（3）把创建的DOM对象追加到DOM树里面appendChild（）
语法

代码

//创建节点
var a1=document.createElement('div');

作用：可以创建一个不存在的标签名字
例子:点击按钮，创建ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<div id="box">

</div>
<script>
    // 模拟数据
    var arr=["苹果",'橘子','梨子'];
    var btn=document.getElementById('btn');
    var box=document.getElementById('box');
    btn.onclick=function () {
        var ul=document.createElement('ul');
        box.appendChild(ul);
        for(var i=0;i<arr.length;i++){

            var data=arr[i];
            var li=document.createElement('li');
            //把li放到DOM树中,并且重新绘制
            ul.appendChild(li);
        //    设置li的显示内容
        //    有兼容性
           setInnerText(li,data);

        }

    }
//    设置标签之间的内容
    function setInnerText(element,content) {
    //        判断当前浏览器时否支持innerText
        if(typeof element.innerText==="string"){
            element.innerText=content;
        }
        else {
            element.textContent=content;
        }
    }

</script>
</body>
</html>

1.2、document.write()

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<script>
    var btn=document.getElementById('btn');
    btn.onclick=function () {
        document.write('<p>我是动态创建的</p>')
    }
</script>
</body>
</html>

结果：

点击之后

注意：这个方法会把之前整个页面覆盖掉，所以这个方法很局限，用的会很少

应用：在网页中需要加入广告的时候，由广告商给你两行代码添加到其他页面上

代码：

网页上：

1.3、element.innerHTML=‘’

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<div id="box">

</div>
<script>
    var btn=document.getElementById('btn');
    btn.onclick=function () {
        var box=document.getElementById('box');
        box.innerHTML='<p>我是属性创建的</p>'
    }

</script>
</body>
</html>

结果·：他只是写进去不覆盖
应用数据交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<div id="box">

</div>
<script>
    // 模拟数据
    var arr=["苹果",'橘子','梨子'];
    var btn=document.getElementById('btn');
    btn.onclick=function () {
        var box=document.getElementById('box');
        box.innerHTML='<ul>';
        for(var i=0;i<arr.length;i++){

            box.innerHTML+=`<li>${arr[i]}</li>`;

        }
        box.innerHTML+='</ul>'
        // var box=document.getElementById('box');
        // box.innerHTML='<p>我是属性创建的</p>'
    }

</script>
</body>
</html>

点击之后：

优化，多次修改dom树，导致效率低，所以用变量存储这个，等连接好后再写入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="创建" id="btn">
<div id="box">

</div>
<script>
    // 模拟数据
    var arr=["苹果",'橘子','梨子'];
    var btn=document.getElementById('btn');
    btn.onclick=function () {
        var box=document.getElementById('box');
        // 优化 有个dom树每当修改就对dom树重新来操作
       var  content='<ul>';
        for(var i=0;i<arr.length;i++){

            content+=`<li>${arr[i]}</li>`;

        }
        content+='</ul>'
        // var box=document.getElementById('box');
        box.innerHTML=content
    }

</script>
</body>
</html>

1.4、性能

innerHtml>creatElement>document.write

二、插入节点

2.1、最后插入appendChild

父节点.appendChild(新的子节点);

在父节点的最后插入一个新的子节点

2.2、参考前插入一个节点insertBefore

父节点.insertBefore(新的子节点,作为参考的子节点)

解释：在参考节点前插入一个新的节点，如果参考节点为null，那么它将在父节点里面的最后插入一个子节点

2.3、强调

appendChild可以移动元素

<div class="box11">
    <div class="box12">生命壹号</div>
</div>

<div class="box21">
    <div class="box22">永不止步</div>

</div>

上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法box11.appendChild(box22)，最后产生的结果是：box22会跑到box11中（也就是说，box22不在box21里面了）。这是一个很神奇的事情：

三、删除节点removeChild

格式

父节点.removeChild(子节点);

代码

<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>

 var a=document.getElementsByTagName('ul')[0];
 a.removeChild(document.getElementsByTagName('li')[0])

</script>

解释：用父节点删除子节点，必须要指定是删除那个子节点

要删除自己的节点

node1.parentNode.removeChild(node1);

四、复制节点（克隆节点）

4.1、直接获取

格式

要复制的节点.cloneNode();       //括号里不带参数和带参数false，效果是一样的。
    要复制的节点.cloneNode(true);

括号里带不带参数，效果是不同的。解释如下：

不带参数/带参数false：只复制节点本身，不复制子节点。
带参数true：既复制节点本身，也复制其所有的子节点。

4.2、替换节点replaceChild(新的节点，旧的节点)

代码·

replaceNode=pareNode.replacrChild(newChild,oldChild);

newChild用来替换oldChild的新节点。如果该节点已经存在DOM树中，则它会被从原始的位置删除。
oldChild 被替换的原始节点
replaceChild和oldChild相等

五、设置节点的属性

我们可以获取节点的属性值，设置节点的属性值，删除节点的属性

5.1、获取节点属性

元素节点.属性名；元素节点[属性名];

<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
<script type="text/javascript">
    var myNode = document.getElementsByTagName("img")[0];
    console.log(myNode.src);
    console.log(myNode.className);    //注意，是className，不是class
    console.log(myNode.title);
    console.log("------------");
    console.log(myNode["src"]);
    console.log(myNode["className"]); //注意，是className，不是class
    console.log(myNode["title"]);
  </script>
</body>

5.2 用方法二、getAttribute（）

格式

元素节点.getAttribute(“属性名称”);

举例

  console.log(myNode.getAttribute("src"));
    console.log(myNode.getAttribute("class"));   //注意是class，不是className
    console.log(myNode.getAttribute("title"));

5.3、设置属性

（1）、设置节点的属性值

    myNode.src = "images/2.jpg"   //修改src的属性值
    myNode.className = "image2-box";  //修改class的name

（2）、设置节点属性值

   myNode.setAttribute("src","images/3.jpg");
    myNode.setAttribute("class","image3-box");
    myNode.setAttribute("id","你好");

(3)、删除节点的属性
格式

    元素节点.removeAttribute(属性名);
    myNode.removeAttribute("class");
    myNode.removeAttribute("id");

5.4、总结

<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>
    var div = document.getElementById("box");
    //采用方式一进行set
    div.aaaa = "1111";
    console.log(div.aaaa);    //打印结果：1111。可以打印出来，但是不会出现在标签上
    //采用方式二进行set
    div.setAttribute("bbbb","2222");    //bbbb作为新增的属性，会出现在标签上
    console.log(div.getAttribute("aaaa"));   //打印结果：null。因为方式一的set，无法采用方式二进行get。
    console.log(div.bbbb);                   //打印结果：undefined。因为方式二的set，无法采用方式一进行get。
</script>
</body>

显示全文

全部栏目