一. 添加删除替换元素

1. 添加新元素: 3步:

(1). 创建一个新的空元素对象

(2). 为新元素设置必要的属性: 新元素.属性名="属性值"

(3). 将新元素添加到DOM树

2. 示例: 动态创建a元素和input元素

3. 示例: 动态生成表格内容

4. 优化

5. 删除元素: 父元素.removeChild(子元素)

⬛总结: DOM 5件事: 增删改查+事件绑定:

【前文回顾】👉 DOM操作之如何修改元素的样式_03

一. 添加删除替换元素

1. 添加新元素: 3步:

(1). 创建一个新的空元素对象

a. var 新元素=document.createElement("标签名");

创建元素

b. 意为: 在内存中创建一个新的空元素对象

c. 比如: 想创建一个a元素：

var a=document.createElement("a");

结果：

内存中: <a></a>

(2). 为新元素设置必要的属性: 新元素.属性名="属性值"

比如: 想让a变成一个可看见可跳转的超链接元素
a.innerHTML="go to tmooc"

a.href="http://tmooc.cn"

结果:

<a href=" http://tmooc.cn "> go to tmooc </a>

(3). 将新元素添加到DOM树

a. 问题: 用createElement创建的新元素对象，暂时是游离在内存中，并没有被加入到DOM树。而浏览器显示哪些元素，完全依照DOM树的内容来生成。所以，新元素不会被浏览器加载到页面上，用户暂时是看不到的！

b. 解决: 今后只要创建新元素，最后一步都是将新元素添加到DOM树上指定的父元素下。

c. 如何: 3种:

1). 在一个指定的父元素下所有直接子元素结尾追加新元素；

父元素.appendChild(新元素)

追加孩子

2). 插入到一个父元素下的某个现有元素之前:

父元素.insertBefore(新元素, 现有元素)

插入(到)之前

3). 用新元素替换指定父元素下的某个现有元素

父元素.replaceChild(新元素, 现有元素)

替换孩子

2. 示例: 动态创建a元素和input元素

1_createElement.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><script>//想创建一个a元素var a = document.createElement("a");//设置a的关键属性a.innerHTML = "go to tmooc";a.href = "http://tmooc.cn";console.log(a);//将a追加到body的结尾document.body.appendChild(a);//还想创建一个普通的文本框，放在a之前/之后/替换avar input = document.createElement("input");// document.body.insertBefore(input,a);// document.body.appendChild(input);document.body.replaceChild(input, a);</script></body>
</html>

运行结果：

3. 示例: 动态生成表格内容

1_createTable.html

<!DOCTYPE html>
<html><head><title>动态创建表格</title><meta charset="utf-8" /><style>table {width: 600px;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #ccc;}</style></head><body><div id="data"><table><thead><tr><th>ename</th><th>salary</th><th>age</th></tr></thead></table></div><script>var json = [{ ename: "Tom", salary: 11000, age: 25 },{ ename: "John", salary: 13000, age: 28 },{ ename: "Mary", salary: 12000, age: 25 },];//创建tbodyvar tbody = document.createElement("tbody");//遍历json数组中每个员工对象for (var emp of json) {//每遍历一个员工对象，就要创建tr，添加到tbody下// var tr=document.createElement("tr");// tbody.appendChild(tr);//每次都在末尾追加新行// var tr=tbody.insertRow();//每次都在开头插入新航var tr = tbody.insertRow(0);//遍历当前员工对象中每个属性for (var key in emp) {//每遍历一个属性，就创建一个td，添加到tr下var td = document.createElement("td");tr.appendChild(td);//设置当前td的内容为当前员工对象emp的当前属性值td.innerHTML = emp[key]; //复习js高级day04->2.3}}//最后在查找table，将tbody一次性装入table中//只需要一次重绘页面即可！var table = document.querySelector("#data>table");table.appendChild(tbody);</script></body>
</html>

运行结果：

4. 优化

(1). 原理: 浏览器中显示什么元素，完全根据DOM树中的内容生成。只要程序执行过程中，修改了DOM树的内容，浏览器就被迫重新渲染整个界面。

(2). 问题: 如果频繁修改DOM树的内容，导致浏览器频繁重新渲染整个界面，将极大的降低页面的加载效率！

(3). 解决: 尽量减少操作DOM树的次数！还要保证内容不少！

a. 第一种情况: 如果同时添加父元素和子元素时，应该先在内存中将所有子元素都添加到父元素中。最后再一次性将整个父元素加到DOM树上。

b. 第二种情况: 如果父元素已经在页面上了，想添加多个平级子元素，必须借助文档片段对象来优化。

1). 什么是文档片段对象: 在内存中临时保存多个平级子节点的虚拟父节点对象

2). 如何: 3步:

i. 先创建文档片段(fragment)对象

var 文档片段对象=document.createDocumentFragment();

创建文档片段

ii. 再将多个平级子元素添加到文档片段对象中

文档片段对象.appendChild(子元素)

iii. 最后将整个文档片段对象一次性添加到DOM树中父元素下

父元素.appendChild(文档片段对象)

3). 强调: 虽然加入文档片段的子元素，以appendChild方式添加到文档片段。但是，当文档片段将所有子元素送到DOM树上指定父节点下之后文档片段对象就释放了！不会成为DOM树上一级真实的节点！

4). 示例: 动态生成表格内容(tbody已经在页面上)

1_createTable2.html

<!DOCTYPE html>
<html><head><title>动态创建表格</title><meta charset="utf-8" /><style>table {width: 600px;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #ccc;}</style></head><body><div id="data"><table><thead><tr><th>ename</th><th>salary</th><th>age</th></tr></thead><tbody></tbody></table></div><script>var json = [{ ename: "Tom", salary: 11000, age: 25 },{ ename: "John", salary: 13000, age: 28 },{ ename: "Mary", salary: 12000, age: 25 },];//先创建一个文档片段对象var frag = document.createDocumentFragment();//遍历json数组中每个员工对象for (var emp of json) {//每遍历一个员工对象，就要创建tr，添加到文档片段对象下var tr = document.createElement("tr");frag.appendChild(tr);//遍历当前员工对象中每个属性for (var key in emp) {//每遍历一个属性，就创建一个td，添加到tr下var td = document.createElement("td");tr.appendChild(td);//设置当前td的内容为当前员工对象emp的当前属性值td.innerHTML = emp[key]; //复习js高级day04->2.3}}//查找tbodyvar tbody = document.querySelector("#data>table>tbody");//将文档片段对象一次性添加到tbody中tbody.appendChild(frag);</script></body>
</html>

运行结果：

5. 删除元素: 父元素.removeChild(子元素)

通过父级删除子级removeChild()方法，是删除元素里面指定的子元素

🌱 扩展：删除元素有两种写法

1. 自删，即删除自身：使用remove()方法，是元素删除自己

2. 删除父级的子级：使用removeChild()方法，是删除元素里面指定的子元素

1_removeElement.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>创建和删除元素</title><style>* {list-style: node;}#root {border: 1px solid #ccc;padding: 10px;}</style></head><body><span>城市：</span><input type="text" id="city" /><button id="addElement">添加一个元素</button><ul id="root"></ul><div><p>我是一个P</p></div><script>// 获取ul标签let ul = document.querySelector("#root");// 获取文本框let city = document.querySelector("#city");// 获取按钮let button = document.querySelector("#addElement");// 绑定事件处理函数button.onclick = function () {// 创建一个li标签let li = document.createElement("li");// li.innerHtml='北京'li.innerHTML = city.value; // 从文本框里面获取value属性值// appendChild(li)方法，用于向当前元素里面追加子元素ul.appendChild(li);// 给创建的每一个li标签，绑定一个点击事件，点击li标签时，删除自己li.onclick = function () {// 事件处理函数里面的this，指向事件的调用者，即正在触发事件的当前元素对象本身// console.log(this)// 1、删除元素的第一种方式：自删// li.remove()// this.remov()// 2、删除元素的第二种方式，由父级删除子级ul.removeChild(li);};};// parenElement 和 parentNode属性，返回父级元素console.log(document.querySelector("p").parentElement);console.log(document.querySelector("p").parentNode);</script></body>
</html>

运行结果：

⬛总结: DOM 5件事: 增删改查+事件绑定:

1. 查找元素: 4种查找方式

2. 修改元素: 3种东西可修改

修改元素内容
修改元素属性
修改元素样式

3. 添加/删除元素:

(1). 只添加一个新元素: 3步

a. 创建一个新元素:

var 新元素=document.createElement("标签名")

b. 为元素设置关键属性:

新元素.属性名="属性值";

c. 将新元素添加到DOM树: 3种:

1). 末尾追加:

父元素.appendChild(新元素)

2). 在某个元素前插入:

父元素.insertBefore(新元素, 现有元素)

3). 替换某个元素:

父元素.replaceChild(新元素, 现有元素)

(2). 优化: 尽量减少操作DOM树的次数，2种:

a. 如果同时添加父元素和子元素，应该先将子元素添加到父元素，最后再将父元素一次性添加到DOM树

b. 如果父元素已经在页面上，要添加多个平级子元素。应该利用文档片段对象

1). 创建文档片段对象:

var frag=document.createDocumentFragment()

2). 将子元素添加到文档片段对象中:

frag.appendChild(子元素)

3). 最后将文档片段对象一次性添加到DOM树上父元素下

父元素.appendChild(frag);

(3). 删除元素: 父元素.removeChild(子元素)

Tips：自删使用remove()方法，是元素删除自己

【后文传送门】👉 HTML DOM常用对象: 对常用元素的简化操作_05

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！