js中对DOM操作的常用方法总结

1. Node节点

属性：

nodeName 节点名称，元素节点保存的是标签名
nodeType 节点类型，包括元素节点和文字节点
nodeValue 节点值，元素节点的值始终为null

childNodes 保存子节点列表NodeList对象
parentNode 父节点
previousSibling 上一个同胞节点
nextSibling 下一个同胞节点
firstChild 第一个子节点
lastChild 最后一个子节点
*以上关系指针都是只读的，只能通过方法来操作节点

方法：

appendChild(newNode) 在子节点列表末尾添加新节点
insertBefore(newNode, node.firstChild) 特定位置插入新节点
replaceChild(newNode, node.firstChild) 替换节点
removeChild(node.firstChild) 删除节点
*以上方法都是对子节点进行操作，要使用这几个方法必须先取得父节点parentNode，对不支持子节点的节点上调用这些方法，会导致错误

cloneNode(true) 复制节点，接受一个布尔参数，表示是否执行深复制
normalize() 合并文本节点和删除空文本节点

2. 查找子元素节点

属性：

childElementCount 子元素个数
firstElementChild 第一个子元素
lastElementChild 最后一个子元素
previousElementSibling 前一个同辈元素
nextElementSibling 后一个同辈元素
*支持IE9+

3. 查找元素方法

getElementById('id') 取得指定ID的第一个元素
getElementsByTagName('img') 取得所有标签的元素，返回HTMLCollection对象

querySelector('body') 通过CSS选择符获取第一个元素
querySelectorAll('body') 通过CSS选择符获取所有元素，返回NodeList对象，底层实现为一组元素的快照，而非不断对文档进行搜索的动态查询
*选择API支持IE8+

getElementsByClassName('btn') 通过类名获取所有元素，返回NodeList对象，有性能问题
*支持IE9+

4. 操作特性方法

getAttribute('id') 获取特性
*获取到的style特性为CSS文本，获取到的onclick特性为相应代码字符串,一般仅用于取得自定义特性
setAttribute('id', 'red') 设置特性
removeAttribute('id') 移除特性

element.attributes 特性动态集合NamedNodeMap对象，类似NodeList
*可用于遍历元素的特性

5.操作类的方法

className属性
元素所有类构成的字符串
HTML5新增的classList属性
add(value) 增加类
contain(value) 是否包含类
remove(value) 删除类，删除不存在的类不会报错
toggle(value) 改变类
length属性类的个数，可以通过索引来访问类名