节点操作介绍
1 节点概述
- 网页中所有的内容都叫做节点（标签，属性，文本，注释等），在DOM中，节点使用的是 node 表示。
- HTML DOM 树中的所有节点都可以通过JavaScript进行访问，所有HTML元素（节点）都可以被修
改，也可以创建或者是删除。
一般节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等) 我们在实际开发中，节点操作主要是对元素节点进行操作。
<p id="1" date-yhb='18' date-index='10'>文本</p> /* 上述代码中："id="1" ，date-yhb='18' ，date-index='10'"为属性节点。 "文本"为文本节点 "<p></p>"为标签节点 */
2 节点层级
- 利用 DOM 树可以把节点划分为不同的层级关系：
- 父子节点：两个具有嵌套关系的节点是父子节点。比如：
<html></html>就是<head></head>和<body></body>的父节点。 - 兄弟节点：两个具有并列关系的节点是兄弟节点。比如：
<head></head>和<body></body>就是兄弟节点。
2.1 父级节点
node.parentNode
- parentNode 属性可以返回某节点的父节点，注意是最近的父节点。
- 如果指定的节点没有父节点则返回null。
- 示例：
<div class="demo"> <div class="box"> <span class="erwema">x</span> </div> <script> // 父节点 parentNode var erweima = document.queryselector('.erweima') // var box = document.queryselector('.box') // 得到的是离元素最近的父级节点，如果找不到父级节点，则返回值为 null 。 console.log(erweima.parentNode) </script>
2.2 子节点
- 所有子节点
parentMode.childNodes （标准）
- parentMode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
- 注意：返回值的集合里面包括了所有的子节点，包括元素节点，文本节点等。
- 如果只想要获得里面的元素节点，则需要进行专门的处理，所以我们一般不提倡使用 parentMode.childNodes 。
- 案例：
<body> <ul> <li>列表1</li> <li>列表2</li> </ul> <script> var ul = document.querySelector('ul') // childNodes 将空白也会当作子节点。 console.log(ul.childNodes) </script> </body>
上述代码实现的效果是：
// 为了避免 childNodes 将空格当作子节点可以将空格删除，但是这样的代码不规范，排版也乱，所以可以使用另外一个属性：children。 console.log(ul.children) // 虽然 children 不是非标准的，但是各个浏览器都支持，完全可以放心使用。
- 子节点元素
- 获取第一个子节点：可以根据索引获取想要的子节点。
// 根据索引获取第一个子节点。 ul.children[0].style.color = 'red' // 将ul下面的第一个子节点的文字颜色变为红色。 // 使用属性获取第一个节点。 ul.firstElementChild.style.color = 'red' // 谷歌浏览器和IE9以上支持这个方法。 ul.firstChild.style.color = 'red' // IE8以下只支持这个方法。
- 浏览器的兼容性不同，获取子节点的方式不同
- 实际开发中，firstChild和lastChild包含其他节点，操作不方便，而firstElementChild和lastElementChild又有兼容性问题，那么我们如何获取第一个子元素节点和最后一个子元素节点呢？解决方案：
- 如果想要第一个子元素节点，可以使用parentNode.children[0]。
- 如果想要最后一个子元素节点，可以使用parentNode.children[parentNode.children.lenght-1]。
2.3 兄弟节点
- 获取下一个节点：
node.nextSibling返回当前元素的下一个兄弟节点，没有则返回null。 - 获取上一个节点：
node.previousSibling返回当前元素的上一个兄弟节点，没有则返回null。 - 因为兼容性的问题，兄弟节点也具有像父子节点那样的，在不同的浏览器下，获取节点方式的不同。
- 下一个兄弟元素节点：
node.nextElementSibling - 上一个兄弟元素节点：
node.previousElementSibling
示例：
<body> <ul> <li>列表1</li> <li id="li2">列表2</li> <li>列表2</li> <li>列表2</li> </ul> <script> var li = document.querySelector('#li2') var next = li.nextSibling console.log(next) // nextSibling方法在谷歌浏览器会默认将 li2后面的空格看作是元素，所以输出结果是text。所以我们可以采用下面这个方法。 li.nextElementSibling // 但是IE8并不支持这种方法。所以我们依然可以使用下面这种方法： var next = li.nextSibling || li.nextElementSibling </script> </body>
3 创建节点
document.createElement('tagName')document.createElement() 方法创建由 tagName 指定的HTML元素。因为这些元素不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
补充：
- 获取元素的方式：
- 根据 id 获取；
- 根据标签获取；
- 根据类名称获取；
- 根据加点之间的关系获取。
