【DOM】DOM操作之如何添加、删除、替换元素_04
目录
一. 添加删除替换元素
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");
结果：
(2). 为新元素设置必要的属性: 新元素.属性名="属性值"
比如: 想让a变成一个可看见可跳转的超链接元素
a.innerHTML="go to tmooc"
a.href="http://tmooc.cn"
结果:
(3). 将新元素添加到DOM树
a. 问题: 用createElement创建的新元素对象，暂时是游离在内存中，并没有被加入到DOM树。而浏览器显示哪些元素，完全依照DOM树的内容来生成。所以，新元素不会被浏览器加载到页面上，用户暂时是看不到的！
b. 解决: 今后只要创建新元素，最后一步都是将新元素添加到DOM树上指定的父元素下。
c. 如何: 3种:
1). 在一个指定的父元素下所有直接子元素结尾追加新元素；
父元素.appendChild(新元素)
追加 孩子
2). 插入到一个父元素下的某个现有元素之前:
父元素.insertBefore(新元素, 现有元素)
插入(到)之前
3). 用新元素替换指定父元素下的某个现有元素
父元素.replaceChild(新元素, 现有元素)
替换 孩子
2. 示例: 动态创建a元素和input元素
1_createElement.html
Document //想创建一个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); 运行结果：
3. 示例: 动态生成表格内容
1_createTable.html
动态创建表格 table { width: 600px; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #ccc; } ename salary age
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); 运行结果：
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
动态创建表格 table { width: 600px; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #ccc; } ename salary age
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); 运行结果：
5. 删除元素: 父元素.removeChild(子元素)
通过父级删除子级removeChild()方法，是删除元素里面指定的子元素
🌱 扩展：删除元素有两种写法
1. 自删，即删除自身：使用remove()方法，是元素删除自己
2. 删除父级的子级：使用removeChild()方法，是删除元素里面指定的子元素
1_removeElement.html
创建和删除元素 * { list-style: node; } #root { border: 1px solid #ccc; padding: 10px; } 城市：
我是一个P
// 获取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); 运行结果：
⬛总结: 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()方法，是元素删除自己
如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！