目录为什么学节点操作节点概述节点层级1. 父级节点2. 子节点parentNode.childNodes（标准） parentNode.children（非标准） parentNode.firstChild parentNode.lastChild parentNode.firstElementChild parentNode.lastElementChi...
目录
node.insertBefore(child, 指定元素)
为什么学节点操作
获取元素通常使用两种方式：
1. 利用 DOM 提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector 等
- 逻辑性不强、繁琐
2. 利用节点层级关系获取元素
利用父子兄节点关系获取元素
逻辑性强， 但是兼容性稍差
这两种方式都可以获取元素节点，我们后面都会使用，但是节点操作更简单
节点概述
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。
HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为 1（div）
- 属性节点 nodeType 为 2 （class）
- 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点
console.dir(div);可以显示一个对象所有的属性和方法。
节点层级
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
1. 父级节点
node.parentNode
<body>
<div class="box">
<div class="erweima"></div>
</div>
<script>
// 1.父节点 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box'); 原方法
erweima.parentNode; // 相当于获取了 box
// 得到的是离元素最近的父级节点 ，如果找不到父节点就返回为空
console.log(erweima.parentNode);
</script>
</body>
- parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回 null
2. 子节点
parentNode.childNodes（标准）
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
<script>
// 获取ul里面的li
var ul = document.querySelector('ul');
// 1. 子节点 childNodes 所有的子节点包含 元素节点 ，文本节点等等
ul.childNodes;
console.log(ul.childNodes); // [text, li, text, li, text, li, text, li, text]
console.log(ul.childNodes[0].nodeType); //文本节点
console.log(ul.childNodes[1].nodeType); // 元素节点
</script>
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。 所以我们一般不提倡使用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]);}
}
parentNode.children（非标准）
parentNode.children 是一个只读属性，返回所有的子元素节点。 !元素
它只返回子元素节点，其余节点不返回 （这个是我们重点掌握的）。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
// 2. children 获取所有的子元素节点 是我们实际开发常用的
console.log(ul.children); //[li, li, li, li]
parentNode.firstChild
firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
// 3. firstChild 获取第一个子节点，不管是文本节点还是元素节点
console.log(ol.firstChild); // #text
console.log(ol.lastChild); // #text
parentNode.lastChild
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。(文本节点和元素节点）
parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null。
注意：这个方法有兼容性问题，IE9 以上才支持。
parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点，
最低0.47元/天 解锁文章
329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
