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

最新推荐文章于 2023-05-26 16:25:48 发布

23号婷儿

最新推荐文章于 2023-05-26 16:25:48 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_46179838/article/details/108963568

JS 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了JavaScript中DOM元素的操作，包括创建元素（createElement、createTextNode、createComment、createDocumentFragment）、插入元素（appendChild、insertBefore）、删除元素（removeChild、remove）和替换元素（replaceChild）。此外，还讨论了Element节点的属性（innerHTML、innerText/textContent）和方法（setAttribute、getAttribute），以及如何优化大量节点添加的性能问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、增

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>