2. 科技
    3. JS之DOM元素的增、插、删、替换

    JS之DOM元素的增、插、删、替换

    科技2025-09-04  12

    DOM元素的增、插、删、替换

    一、增1、document.creatElement()——创建元素节点（即创建标签）2、document.creatTextNode()——创建文本节点3、document.creatComment()——创建注释节点4、document.creatDocumentFragment()——创建文档碎片节点5、四个方法的使用需要注意下面几点： 二、插1、appendChild()——类似于剪切的操作2、父级.insertBefore(a,b) 三、删1、parent.removeChild();——父级删除自己的子节点2、chiald.remove();——元素节点真正删除而不存在了 四、替换1、父级.replaceChlid(new,origin); 五、Element节点1、属性1.1 innerHTML——改变HTML里的内容，可取可赋值（赋值会覆盖原来的）1.2 innerText（火狐不兼容）/ textContent（老版本的IE不好使）——可取可赋值，赋值是最好此标签下无其他标签，否则最好不用赋值 2、方法2.1 ele.setAttribute()——添加属性2.2 ele.getAttribute()——查看属性

    一、增

    1、document.creatElement()——创建元素节点（即创建标签）

    createElement通过传入指定的一个标签名来创建一个元素，如果传入的标签名是一个未知的，则会创建一个自定义的标签，注意：IE8以下浏览器不支持自定义标签

    使用createElement要注意：通过createElement创建的元素并不属于html文档，它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档树中;

    2、document.creatTextNode()——创建文本节点

    createTextNode接收一个参数，这个参数就是文本节点中的文本，和createElement一样，创建后的文本节点也只是独立的一个节点，同样需要append Child将其添加到HTML文档树中

    3、document.creatComment()——创建注释节点

    4、document.creatDocumentFragment()——创建文档碎片节点

    createDocumentFragment方法用来创建一个DocumentFragment。在前面我们说到DocumentFragment表示一种轻量级的文档，它的作用主要是存储临时的节点用来准备添加到文档中

    createDocumentFragment方法主要是用于添加大量节点到文档中时会使用到。假设要循环一组数据，然后创建多个节点添加到文档中

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="list"></ul> <input type="button" value="添加多项" id="btnAdd" /> <script> document.getElementById("btnAdd").onclick = function(){ var list = document.getElementById("list"); for(var i = 0;i < 100; i++){ var li = document.createElement("li"); li.textContent = i; list.appendChild(li); } } </script> </body> </html>

    这段代码将按钮绑定了一个事件，这个事件创建了100个li节点，然后依次将其添加HTML文档中。这样做有一个缺点：每次一创建一个新的元素，然后添加到文档树中，这个过程会造成浏览器的回流。所谓回流简单说就是指元素大小和位置会被重新计算，如果添加的元素太多，会造成性能问题。

    这个时候，就是使用createDocumentFragment了DocumentFragment不是文档树的一部分，它是保存在内存中的，所以不会造成回流问题。我们修改上面的代码如下

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul id="list"></ul> <input type="button" value="添加多项" id="btnAdd" /> <script> document.getElementById("btnAdd").onclick = function(){ var list = document.getElementById("list"); var fragment = document.createDocumentFragment(); for(var i = 0;i < 100; i++){ var li = document.createElement("li"); li.textContent = i; fragment.appendChild(li); } list.appendChild(fragment); } </script> </body> </html>

    优化后的代码主要是创建了一个fragment，每次生成的li节点先添加到fragment，最后一次性添加到list

    5、四个方法的使用需要注意下面几点：

    它们创建的节点只是一个孤立的节点要通过appendChild添加到文档中cloneNode要注意如果被复制的节点是否包含子节点以及事件绑定等问题使用createDocumentFragment来解决添加大量节点时的性能问题

    二、插

    1、appendChild()——类似于剪切的操作

    2、父级.insertBefore(a,b)

    eg:在span标签前面加入strong标签

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <span></span> </div> <script> var div = document.getElementsByTagName('div')[0]; var span = document.getElementsByTagName('span')[0]; var strong= document.creatElement('strong'); div.insertBefore(strong,span); </script> </body> </html>

    三、删

    1、parent.removeChild();——父级删除自己的子节点

    2、chiald.remove();——元素节点真正删除而不存在了

    eg：现在我们尝试删除div的子节点<i>，此时的控制台只打印出和，但其实<i>并不是被删除了，而是被剪切了，所以当我们刷新页面后在访问div的时候它还是存在的，只有i.remove();才能真正的删除自己

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <span></span> <strong></strong> <i></i> </div> <script> var div = document.getElementsByTagName('div')[0]; var span = document.getElementsByTagName('span')[0]; var strong= document.getElementsByTagName('strong'); var i= document.getElementsByTagName('i'); </script> </body> </html>

    四、替换

    1、父级.replaceChlid(new,origin);

    DOM基本操作思维导图

    五、Element节点

    1、属性

    1.1 innerHTML——改变HTML里的内容，可取可赋值（赋值会覆盖原来的）

    1.2 innerText（火狐不兼容）/ textContent（老版本的IE不好使）——可取可赋值，赋值是最好此标签下无其他标签，否则最好不用赋值

    2、方法

    2.1 ele.setAttribute()——添加属性

    2.2 ele.getAttribute()——查看属性

    eg:给div、span、strong三个标签加上属性，属性名为“this-name”，属性值为标签名

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div></div> <span></span> <strong></strong> <script> var all = document.getElementsByTagName('*'); for(var i = 0; i < all.length; i++) { all[i].setAttribute("this-name",all[i].nodeName); } </script> </body> </html>

    首先需要把所有标签都选出来，然后再用遍历的方法，给每一个元素都添加属性 打印的结果为

    <div this-name="DIV"></div> <span this-name="SPAN"></span> <strong this-name="STRONG"></strong>
    Processed: 0.015, SQL: 9