目录
(2). 为新元素设置必要的属性: 新元素.属性名=”属性值”
【前文回顾】 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之前/之后/替换a
var 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 },
];
//创建tbody
var 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
}
}
//查找tbody
var 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
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注️️️【青春木鱼】️️️，我将会给你带来巨大的【收获与惊喜】！
