DOM编程④ -- 操作节点
什么是节点操作
获取元素通常使用两种方式：
①利用 DOM 提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector 等
- 逻辑性不强、繁琐
②利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强， 但是兼容性稍差
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单。
节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点
节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
父级节点
node.parentNode
- 1
- parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回 null
子级节点
1. parentNode.childNodes（标准）
- 1
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：
返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用childNodes
var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {
// ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i]);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
也就是要进行一层类型判断(筛选过程)
所以推荐使用：
2. parentNode.children（非标准）
- 1
parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
3. parentNode.firstChild
- 1
firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
4. parentNode.lastChild
- 1
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
5. parentNode.firstElementChild
- 1
firstElementChild 返回第一个子元素节点，找不到则返回null。
6. parentNode.lastElementChild
- 1
lastElementChild 返回最后一个子元素节点，找不到则返回null。
注意：这两个方法有兼容性问题，IE9 以上才支持。
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：
- 如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
- 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
兄弟节点
1. node.nextSibling
- 1
nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
2. node.previousSibling
- 1
previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。
3. node.nextElementSibling
- 1
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
4. node.previousElementSibling
- 1
previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null
注意：这两个方法有兼容性问题， IE9 以上才支持。
解决办法：
自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
创建节点
document.createElement('tagName')
- 1
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
添加节点
1. node.appendChild(child)
- 1
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。
2. node.insertBefore(child, 指定元素)
- 1
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
例如：
<body>
<ul>
<li>123</li>
</ul>
<script>
// 1. 创建节点元素节点
var li = document.createElement('li');
// 2. 添加节点 node.appendChild(child) node 父级 child 是子级 后面追加元素 类似于数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加节点 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
</script>
</body>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
我们想要页面添加一个新的元素 ：
- 创建元素
- 添加元素
删除节点
node.removeChild(child)
- 1
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点
复制节点
node.cloneNode()
- 1
node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
注意：
- 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
- 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
三种动态创建元素区别
- document.write()
- element.innerHTML
- document.createElement()
区别：
- document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
- innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
- innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
- createElement() 创建多个元素效率稍低一点点，但是结构更清晰
总结：不同浏览器下，innerHTML 效率要比 creatElement高
例如：
//innerHTML创建元素
var arr = [];
for (var i = 0; i <= 100; i++) {
arr.push('<a href="#">百度</a>');
}
inner.innerHTML = arr.join('');
// document.createElement() 创建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
DOM重点核心
关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。
创建
- document.write
- innerHTML
- createElement
增
- appendChild
- insertBefore
删
- removeChild
改
主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
- 修改元素属性： src、href、title等
- 修改普通元素内容： innerHTML 、innerText
- 修改表单元素： value、type、disabled等
- 修改元素样式： style、classNam
查
主要获取查询dom的元素
- DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
- H5提供的新方法： querySelector、querySelectorAll 提倡
- 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、
nextElementSibling) 提倡使用
属性操作
主要针对于自定义属性。
- setAttribute：设置dom的属性值
- getAttribute：得到dom的属性值
- removeAttribute移除属性
事件操作
给元素注册事件， 采取 事件源.事件类型 = 事件处理程序
文章来源: blog.csdn.net，作者：十八岁讨厌编程，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/zyb18507175502/article/details/123743660
- 点赞
- 收藏
- 关注作者
评论（0）