JavaScript中常用的DOM操作函数

目前正在自学JavaScript，学到DOM操作，现总结常用操作函数，如有不对，敬请评论，共同进步。JavaScript中DOM操作的核心内容即 dom结点的 增删改查

1、查询

（1）标准的DOM API

• document.getElementById
• document.getElementsByTagName
• document.getElementsByName 在IE8以下不兼容获取不到div、span、非name标准元素属性
• document.getElementsByClassName在IE8以下不兼容;
• document.querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)，参数为css选择器

（2）亲属访问（当前节点node）

• 父节点.firstChild　　　　　　　　　获取父节点的第一个子节点
• 父节点.lastChild　　　　　　　　　获取父节点的最后一个子节点
• node.parentNode　　　　　　　　当前节点的父节点
• node.previousSibling　　　　　　当前节点的上一个兄弟节点
• node.nextSibling　　　　　　　　当前节点的下一个兄弟节点
• node.attributes　　　　　　　　　获取属性集合
• node.childNodes　　　　　　　　获取子元素集合

（3）属性获取

• getAttribute 获取属性值
• getAttributeNode 获取属性节点

2、增加

（1）创建

• document.createElement 　　　　　　　　 创建元素节点　
• document.createTextNode　　　　　　　　创建文本节点
• document.createAttribute　　　　　　 　创建属性节点
• innerHTML
• innerText
• cloneNode 参数为Boolean类型，设置为 true，克隆节点及其属性，以及后代，设置为 false，只需要克隆节点及其后代

（2）加入到DOM树

• appendChild　　　　　　　　　　追加到元素的结尾处
• insertBefore　　　　　　　　　　将元素插入到某一元素的前面
  语法：当前节点的父元素.insertBefore(newItem,existingItem);
• innerHTML

（3）其他

• style的操作
• setAttribute（属性名,属性值）

3、删除

（1）删除元素

• removeChild
• removeAttributeNode

4、修改

（1）修改结点

• 删除节点再加入

（2）修改样式

• style.xxx = xxx
• setAttribute

（3）修改文本

• innerHTML
• innerText 早期火狐浏览器不支持
• 同节点操作，先删除在添加
• nodeValue

（4）修改属性

• .属性名 = xxx
• setAttribute

5、常用的节点属性

• nodeValue 表示节点的值，所有节点都有该属性，但一般文本节点使用该属性

• nodeName 表示节点的名字，所有节点都有该属性，但一般元素节点才使用。元素节点打印的元素名均为大写字母。所有文本节点都打印#text

• nodeType节点类型

  • 1 元素节点
  • 2 属性节点
  • 3 文本节点