【整理】DOM操作一览

高频面试题：什么是DOM，DOM做了什么

DOM，Document Object Model即文档对象模型。 提供了很多对标签进行增删改查的操作。 

---

DOM操作

（注：fn=function 函数，pro=property 属性）

增	新建	fn  createElement（标签名）	创建元素节点
		fn  setAttribute（name，value）	直接设置属性
		fn  cloneNode（true、false）	克隆元素节点	true  包含子节点
				false  不包含子节点
	插入	fn  appendChild（）	拼接节点
		fn  insertBefore（new，old）	插入节点
删		fn  removeChild（）	删除子节点
		fn  removeAttributeNode（）	删除属性节点
改		fn  replaceChild（new，old）	替换节点（需要父级来调用）
		fn  setAttribute（）	修改属性值
查		fn  getElementById（）	通过ID名获取元素，返回匹配的元素
		fn  getElementByTagName（）	通过标签名获取元素，返回类数组集合
		fn  getElementByClassName（）	通过class名获取元素，返回类数组集合（IE6、IE7不适用）
		fn  getElementByName（）	表单常用，通过表单name获取元素，返回类数组集合
		fn  querySelector（）	通过css选择器获取元素，返回匹配的元素
		fn  querySelectorAll（）	通过css选择器获取元素，返回类数组集合
	获取下一个兄弟节点	pro  nextSibling	ele.nextSibling.nodeType
			使用nodeType查看节点类型nodetype返回值： 1、元素节点 2、属性节点 3、文本节点 4、注释
		pro  nextElementSibling	可以忽略文档节点，只获取元素节点（IE6、7、8不兼容）
	获取上一个兄弟节点	pro  previousSibling	ele.previousSibling.nodeType
			使用nodeType查看节点类型nodetype返回值： 1、元素节点 2、属性节点 3、文本节点 4、注释
		pro  previousElementSibling	可以忽略文档节点，只获取元素节点（IE6、7、8不兼容）
	获取子节点	第一个子节点	pro  firstChild	IE6、7、8可以兼容，但是现代浏览器有问题
			pro  firstElementChild	IE6、7、8不兼容
		最后一个子节点	pro  lastChild	IE6、7、8可以兼容，但是现代浏览器有问题
			pro  lastElementChild	IE6、7、8不兼容
		获取子节点	pro  childNode	会获取非元素类型的子节点
			pro  children	获取元素子节点，没有兼容问题，推荐使用
	获取父级节点	pro  parentNode
	获取节点后操作	通过点语法调用标签属性
		通过style属性控制样式
		通过classList控制样式	fn  add（class1，class2，······）添加类名
			fn  remove（class1，class2，······）删除类名
			fn  replace（oldClass，newClass）替换类名
			fn  contain（class）  是否包含某个类名，返回布尔值
			fn  toggle（class，true | false）如果类名存在就删除，不存在就添加，第二个参数代表强制，true 添加，false 删除