怎么添加、删除和修改DOM元素

最新推荐文章于 2021-09-03 18:24:40 发布

代码哒搬运工

最新推荐文章于 2021-09-03 18:24:40 发布

阅读量841

点赞数

分类专栏： javascript 前端 html 文章标签： javascript html5 html 前端

本文链接：https://blog.csdn.net/weixin_45788388/article/details/106054996

版权

前端同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

html

43 篇文章 0 订阅

订阅专栏

javascript

33 篇文章 0 订阅

订阅专栏

DOM的任何一个节点都是可以操作的。操作无非就是增删改查。今天主要介绍增删改DOM元素节点，元素节点也是一个对象。也就是说，元素对象也有属性和方法。

添加

我们要想添加DOM元素，首先需要创造出来一个DOM元素。

createElement(nodename) 方法：通过指定名称创建一个元素。返回值是一个元素对象。

参数nodename：创建元素的名称。字符串类型。比如：

var pNode = document.createElement("p");

这样，一个新的元素节点就创建出来了。添加元素一般是在已有的元素节点添加。元素对象添加子节点的方法有两个：

appendChild(node) 方法：向节点的子节点列表的末尾添加新的子节点。

参数node：添加的节点对象。用法如下：

<div id="test">
  <div>测试</div>
</div>

<script>
var pNode = document.createElement("p");
var testElement = document.getElementById("test");
testElement.appendChild(pNode);
</script>

新的DOM结构如下：

<div id="test">
  <div>测试</div>
  <p></p>
</div>

insertBefore(newnode,existingnode) 方法：在已有的子节点前插入一个新的子节点。

参数
newnode：要插入的节点对象。
existingnode：要添加新的节点前的子节点。

用法如下：

<div id="test">
  <div id="test1">测试1</div>
  <div id="test2">测试2</div>
</div>

<script>
var pNode = document.createElement("p");
var testElement = document.getElementById("test");
var test2Element = document.getElementById("test2");
testElement.insertBefore(pNode,test2Element);
</script>

新的DOM结构如下：

<div id="test">
  <div id="test1">测试1</div>
  <p></p>
  <div id="test2">测试2</div>
</div>

这两个方法也可以移动DOM元素。如果添加已有的元素，操作DOM的时候，会先把存在的元素删除，然后，将其插入新的位置。比如：

<div id="test">
  <div>测试</div>
</div>

<div id="test1">
  <p id="p1"></p>
  <p id="p2"></p>
</div>

<script>
var pNode = document.getElementById("p1");
var testElement = document.getElementById("test");
testElement.appendChild(pNode);
</script>

新的DOM结构如下：

<div id="test">
  <div>测试</div>
  <p id="p1"></p>
</div>
<div id="test1">
  <p id="p2"></p>
</div>

insertBefore也类似。

cloneNode(deep) 方法：克隆元素。该方法将复制并返回调用它的节点的副本。

参数deep：可选，布尔值。默认是false。如果设置为true，可以实现深度复制。就是说，它将递归复制当前节点的所有子孙节点。否则，它只复制当前节点。比如：

<div id="test">
  <div>测试</div>
</div>

<div id="test1">
  <p id="p1">段落1</p>
  <p id="p2">段落2</p>
</div>

<script>
var pNode = document.getElementById("p1");
var pNode1 = pNode.cloneNode();
var testElement = document.getElementById("test");
testElement.appendChild(pNode1);
</script>

新的DOM结构如下：

<div id="test">
  <div>测试</div>
  <p id="p1"></p>
</div>

<div id="test1">
  <p id="p1">段落1</p>
  <p id="p2">段落2</p>
</div>

如果cloneNode的参数设置为true，新的DOM结构如下：

<div id="test">
  <div>测试</div>
  <p id="p1">段落1</p>
</div>

<div id="test1">
  <p id="p1">段落1</p>
  <p id="p2">段落2</p>
</div>

删除

removeChild(node) 方法：从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

参数node：要移除的节点对象。用法如下：

<div id="test">
  <p id="p1">段落1</p>
  <p id="p2">段落2</p>
</div>

<script>
var pNode = document.getElementById("p1");
var testElement = document.getElementById("test");
testElement.removeChild(pNode);
</script>

新的DOM结构如下：

<div id="test">
  <p id="p2">段落2</p>
</div>

removeChild方法：如果想删除某个元素，必须知道它的父元素，由它的父元素调用removeChild方法将其删除。

元素对象有一个parentNode属性，可返回某节点的父节点，我们可以利用这一属性，来对上面的代码优化一下：

<div id="test">
  <p id="p1">段落1</p>
  <p id="p2">段落2</p>
</div>

<script>
var pNode = document.getElementById("p1");
pNode.parentNode.removeChild(pNode);
</script>

结果和上面的代码是一样的，但是，我们这样写，就不用自己去寻找子节点的父节点了。

修改

replaceChild(newnode,oldnode) 方法：将某个子节点替换为另一个。

参数：
newnode：要插入的节点对象。
oldnode：要移除的节点对象。

用法如下：

<div id="test">
  <div id="d1">测试</div>
</div>

<script>
var pNode = document.createElement("p");
var dNode = document.getElementById("d1");
var testElement = document.getElementById("test");

testElement.replaceChild(pNode,dNode);
</script>

新的DOM结构如下：

<div id="test">
  <p></p>
</div>

要插入的节点，如果原来DOM里面存在，那么它会和上面appendChild、insertBefore方法类似，先删除，再替换到新的位置。比如：

<div id="test">
  <div id="d1">测试1</div>
  <div id="d2">测试2</div>
</div>

<script>
var dNode1 = document.getElementById("d1");
var dNode2 = document.getElementById("d2");
var testElement = document.getElementById("test");

testElement.replaceChild(dNode2,dNode1);
</script>

新的DOM结构如下：

<div id="test">
  <div id="d2">测试2</div>
</div>

大家可能会发现一个问题，我们新创建的元素，都是一个空元素，里面没有内容。

这里，大家需要注意一下，我们之前介绍DOM节点的时候，说，节点有几种类型，
元素节点、文本节点等等。我们HTML元素里面的文本内容，映射到DOM，是文本节点。如果需要元素节点里面有文本节点，我们需要创建文本节点，方法如下：

createTextNode(text) 方法：创建文本节点。

参数text：文本节点的内容。字符串类型。只能是文本，不能是HTML代码。比如：

<div id="test">
  <div>测试</div>
</div>

<script>
var pNode = document.createElement("p");
var pTxt = document.createTextNode('新文本');
pNode.appendChild(pTxt);

var testElement = document.getElementById("test");
testElement.appendChild(pNode);
</script>

新的DOM结构如下：

<div id="test">
  <div>测试</div>
  <p>新文本</p>
</div>

innerHTML属性：设置或者返回元素的内容。是一个可读可写的属性。上面的例子可以改为如下写法：


<div id="test">
  <div>测试</div>
</div>

<script>
var pNode = document.createElement("p");
pNode.innerHTML = '新文本';

var testElement = document.getElementById("test");
testElement.appendChild(pNode);
</script>

innerHTML属性设置的内容可以是任意的，包括HTML。比如：

<div id="test">
  <div>测试</div>
</div>

<script>
var pNode = document.createElement("p");
pNode.innerHTML = '<span style="color:red;">刘小妞的栖息地</span>';

var testElement = document.getElementById("test");
testElement.appendChild(pNode);
</script>

新的DOM结构如下：

<div id="test">
  <div>测试</div>
  <p>
    <span style="color:red;">刘小妞的栖息地</span>
  </p>
</div>

效果如下图：

在这里插入图片描述

我们在操作DOM的时候，经常会在事件里操作。比如，点击个按钮，删除一条记录。代码如下：

<div id="test">
  <p id="p1">段落1</p>
  <p id="p2">段落2</p>
</div>

<button onclick="del()">删除</button>

<script>
function del(){
  var pNode = document.getElementById("p1");
  pNode.parentNode.removeChild(pNode);
}
</script>