本文介绍了2022年7月21日的学习笔记，重点涵盖DOM操作中克隆节点的方法、动态创建元素的三种方式对比，以及DOM核心的创建、增删改查和属性操作。通过实例演示了如何使用`cloneNode()`进行深度复制，并探讨了`document.write`、`innerHTML`和`createElement`在动态元素生成中的效率和适用场景。
2022年7月21日 周四学习记录博客 学习时长：3h 学习内容：DOM操作中的节点操作
目录
案例练习源代码：https://download.youkuaiyun.com/download/MartinYP/86247680
节点操作
7. 复制节点(克隆节点)
node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
注意：
1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。 2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
<body>
<ul>
<li>1111</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 1. node.cloneNode(); 括号为空或者里面是false 浅拷贝 只复制标签不复制里面的内容
// 2. node.cloneNode(true); 括号为true 深拷贝 复制标签复制里面的内容
var lili = ul.children[0].cloneNode(true);
ul.appendChild(lili);
</script>
</body>
案例：动态生成表格
分析：
- 1.里面的学生数据都是动态的，我们需要js 动态生成。 这里我们模拟数据，自己定义好数据。 数据我们采取对象形式存储。
- 所有的数据都是放到tbody里面的行里面。
- 因为行很多，我们需要循环创建多个行（对应多少人）
- 每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
- 最后一列单元格是删除，需要单独创建单元格。
- 最后添加删除操作，单击删除，可以删除当前行。
8. 三种动态创建元素区别
- document.write()
- element.innerHTML
- document.createElement()
区别：
- document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
- innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
- innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- createElement() 创建多个元素效率稍低一点点，但是结构更清晰
- 总结：不同浏览器下，innerHTML 效率要比 creatElement 高
<body>
<div class="innner"></div>
<div class="create"></div>
<script>
// 2. innerHTML 创建元素
var inner = document.querySelector('.inner');
// 2.1 innerHTML 用拼接字符串方法
for (var i = 0; i <= 100; i++) {
inner.innerHTML += '<a href="#">百度</a>';
}
// 2.2 innerHTML 用数组形式拼接
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// 3.document.createElement() 创建元素
var create = document.querySelector('.create');
var a = document.createElement('a');
create.appendChild(a);
</script>
</body>
DOM核心
对于DOM操作，我们主要针对子元素的操作，主要有
- 创建
- 增
- 删
- 改
- 查
- 属性操作
- 时间操作
1. 创建
- document.write
- innerHTML
- createElement
2. 增
- appendChild
- insertBefore
3. 删
- removeChild
4.改
- 主要修改dom的元素属性，dom元素的内容、属性、表单的值等
- 修改元素属性：src、href、title 等
- 修改普通元素内容：innerHTML、innerText
- 修改表单元素：value、type、disabled
- 修改元素样式：style、className
5. 查
主要获取查询dom的元素
- DOM提供的API方法：getElementById、getElementsByTagName (古老用法，不推荐)
- H5提供的新方法：querySelector、querySelectorAll (提倡)
- 利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
6. 属性操作
主要针对于自定义属性
- setAttribute：设置dom的属性值
- getAttribute：得到dom的属性值
- removeAttribute：移除属性
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
