为什么学节点操作

1. 利用DOM提供的方法获取元素

• document.getElementById()
• document.getElementByTagName()
• document.querySelector等
• 逻辑性不强，繁琐

2. 利用节点层级关系获取元素

• 利用父子兄节点关系获取元素
• 逻辑性强，但兼容性稍差

节点概述

一般地，节点至少拥有nodeType, nodeName 和nodeValue这三个基本属性

• 元素节点 nodeType为1
• 属性节点 nodeType为2
• 文本节点 nodeType为3（文本节点包含文字、空格、换行等）

节点层级

1. 父级节点
   parentNode

• parentNode属性可返回某节点的父节点，注意是最近的一个父节点
• 如果指定的节点没有父节点则返回null

2. 子节点

• parentNode.childNodes

注意这个是包含文本节点的，包括文本节点

• parentNode.children(非标准)

获取所有的子元素节点，也是我们实际开发常用的

1. parentNode.children[0] 获取第一个元素
2. parementNode.children[parentNode.children.length -1] 获取最后一个元素
3. parentNode.firstElementChild, parmentNode.lastElementChild挺好用，但是IE9以上才支持
4. parentNode.lastChild, parentNode.firstChild返回的是包括文本节点的children，很可能包含的不是我们想要的element

3. 兄弟节点

• node.nextElementSibling
• node.previousElementSibling

4. 创建节点, 添加节点

document.createElement('li');
node.appendChild(child); //后面追加元素
node.insertBefore(child, 指定元素); //指定元素前面加元素

5. 删除节点
   node.removeChild(’元素‘);
6. 复制节点

node.cloneNode();

7. innerHTML vs createElement

• innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接）， 结构稍微复杂
• createElement()创建多个元素效率低一点点，但是结构更清晰