DOM之元素的创建+添加+删除+克隆

前端小草籽

已于 2022-08-12 22:22:19 修改

阅读量2.5k

点赞数

分类专栏： Dom操作文章标签：前端 javascript

于 2022-07-18 09:33:34 首次发布

本文链接：https://blog.csdn.net/weixin_47075145/article/details/125839019

版权

Dom操作专栏收录该内容

16 篇文章 1 订阅

订阅专栏

1.获取元素：

2.创建元素：document.createElement()

3.添加元素到页面（文档树中）

添加元素到页面（文档树中）x.appendChild(y)

给创建的标签设置类名 x.className

可以给创建的元素设置多个类名方式： x.classList.add();参数是类名

4.删除

方式1：爸爸删儿子 removeChild()

方式2：自己移除 remove()

方式3：清空 innerHTML值为空字符串

5.克隆 cloneNode()

文档树中的节点们，是可以用js进行增删改查的

1.获取元素：

eg：document.querySelector('#box'); 这种类似的

2.创建元素：document.createElement()

注意：创建的这个元素是不会渲染渲染到页面上，它是创建到内存中，没有到文档树中，所以没有渲染

var box2 = document.createElement('div'); //传入的字符串，是标准的标签名字（创建什么标签，字符串就填什么标签名字）

eg：var obj = {age:22} ,这个对象就不会渲染到页面中，只是在内存中创建。

3.添加元素到页面（文档树中）

添加元素到页面（文档树中）x.appendChild(y)

01.把创建的标签添加到文档树中 x.appendChild(y) 把y节点对象添加到x节点中 (要保证x节点在文档树中才能把y添加进去)

   <div id="box1"></div>

    <script>    
        //创建一个div元素 是创建到内存中 没有创建到文档树中
        var box2 = document.createElement('div'); 
        var box3 = document.createElement('div');
        //把box3节点对象添加到box2节点中  
        box2.appendChild(box3);
    </script>

结果：

分析：因为box2是没有创建到文档树中而是内存中，所以把box3添加点到box2中也不会成功。

   <div id="box1"></div>
    <script>    
        var box1 = document.querySelector('#box1');
         //创建一个div元素 是创建到内存中 没有创建到文档树中
        var box2 = document.createElement('div'); 
        //把box2节点对象添加到box1节点中  这样box2就进入文档树
        box1.appendChild(box2);

        //这样box3才能进入文档树
        var box3 = document.createElement('div');
        box2.appendChild(box3);
    </script>

注意点:

x.appendChild(y)注意点移位

如果x,y都是文档树中的元素，把y节点添加到x节点中，叫做移位（原来位置的y就没有了）

<body>  
   <div id="box1">6666</div> 
   <button id="btn"></button>
    <script>
        var box = document.querySelector('#box1');
        var btn = document.querySelector('#btn');
        box.appendChild(btn);    //原来位置的btn没有了，现在是#box1的子元素
    </script>
</body>

给创建的标签设置类名 x.className

   <div id="box1"></div>
    <script>    
        var box1 = document.querySelector('#box1');
         //创建一个div元素 是创建到内存中 没有创建到文档树中
        var box2 = document.createElement('div'); 
        //把box2节点对象添加到box1节点中  这样box2就进入文档树
        box2.className = 'box2'
        box1.appendChild(box2);
    </script>

可以给创建的元素设置多个类名方式： x.classList.add();参数是类名

   <div id="box1"></div>
    <script>    
        var box1 = document.querySelector('#box1');
         //创建一个div元素 是创建到内存中 没有创建到文档树中
        var box2 = document.createElement('div'); 
        box1.appendChild(box2);

        box2.classList.add('isbox2');
        box2.classList.add('Thisbox2');

    </script>

注：这里也可以用className进行字符串拼接的方式实现 classList.add();的功能：

   <div id="box1"></div>
    <script>    
        var box1 = document.querySelector('#box1');
         //创建一个div元素 是创建到内存中 没有创建到文档树中
        var box2 = document.createElement('div'); 
        box1.appendChild(box2);

        // box2.classList.add('isbox2');
        // box2.classList.add('Thisbox2');
        box2.className = 'box2';
        box2.className += ' Thisbox2';
    </script>

分析：多个类名之间有空格隔开，拼接的时候注意空格

注意点1：如果用x.classList.add();重复设置同一类名是只显示一个的

注意点2：移除类名用：x.classList.remove();

   <div id="box1"></div>
    <script>    
        var box1 = document.querySelector('#box1');
         //创建一个div元素 是创建到内存中 没有创建到文档树中
        var box2 = document.createElement('div'); 
        box1.appendChild(box2);

        box2.classList.add('isbox2');
        box2.classList.add('Thisbox2');
        box2.classList.remove('isbox2');  //移除isbox2类名只剩下Thisbox2
    </script>

总结：如果创建的元素只设置一个类名用 className ，如果多个类名用 classList

方式2：

利用innerHTML创建元素（不推荐用）

innerHTML属性值不运行时，当作字符串，运行时当作js代码

   <div id="box1"></div>
    <script>    
        var box1 = document.querySelector('#box1');
         //创建一个div元素 是创建到内存中 没有创建到文档树中
        var box2 = document.createElement('div'); 
        box1.appendChild(box2);
        box2.className = 'box2';
        box1.innerHTML = '666';   //innerHTML属性值666会把box1内部的所有元素全部覆盖
    </script>

分析：为什么写了box1.innerHTML = '666'; box1的子元素box2就没有了呢？因为box2是嵌入到box1中js代码，但是innerHTML的属性值也认为是嵌入的js代码，所以会覆盖掉box2

解决方案：

创建一个元素，把666作为它的innerHTML，然后把它添加到box1

4.删除

方式1：爸爸删儿子 removeChild()

先找到所要删除的元素的父元素，再调用 removeChild();

    <!-- 要删除的对象 #box1-->
    <div id="box1">6666</div>      
   <button id="btn">点击</button>
    <script>    
        btn.onclick = function(){
            //删除元素:
            //1.爸爸删儿子
            var box = document.querySelector('#box1');
            box1.parentElement.removeChild(box1)   //<div id="box1">6666</div> 被删掉
        }
    </script>

分析：一点击按钮，找到#box1的父元素body，通过调用removeChild();删除它的子元素#box1.

找到某个元素的父元素，不一定非要用box1.parentElement，也可以用getElementById()这些来获取。

方式2：自己移除 remove()

    <!-- 要删除的对象 #box1-->
   <div id="box1">6666</div> 
   <button id="btn">点击</button>
    <script>    
        btn.onclick = function(){
            //删除元素:
            //2.自己移除自己 remove
            var box = document.querySelector('#box1');
            box.remove();
        }
    </script>

方式3：清空 innerHTML值为空字符串

<body>  
   <div id="box1">6666</div> 
   <button id="btn">点击</button>
    <script>    
        btn.onclick = function(){
            //删除元素:
            //3.清空自己
            var box = document.querySelector('#box1');
            box.parentElement.innerHTML = '';
        }
    </script>
</body>

分析:一点按钮，#box1的父元素body的内容全部没有了，变为空字符串

清空后：

5.克隆 cloneNode()

参数：填 true 连同元素的后代元素和所有的事件一起克隆

不填true 不会克隆事件等

<body>  
   <div id="box1">6666</div> 
   <button id="btn">点击</button>
    <script>
        var box = document.querySelector('#box1');

        //把 box克隆一份，没填参数true 不会克隆事件等
        var box2 = box.cloneNode();
        //再把克隆出来的box2添加到文档树中去
        box.appendChild(box2);
    </script>
</body>