DOM

一.DOM的概念及作用

DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面的某一部分元素。

二.DOM的基本操作

查询（获取元素）

方法名称	功能
getElementById()	获取特定 ID 元素的节点--最优
getElementsByTagName()	获取相同元素的节点列表，返回类数组，使用[0]来获取
getElementsByClassName()	获取相同类名的节点列表（IE8及以下不支持），返回类数组
querySelector()	通过选择器获取元素，如果获取多个只返回第一个。
querySelectorAll()	通过选择器获取元素，可同时获取多个元素，类数组。

创建、添加、删除、克隆、替换

方法名称	功能
document.createElement(元素节点)	创建一个元素节点，参数是创建的元素。
父节点.appendChild(子节点)	把子节点插入到父节点的内部最后的位置
父节点.insertBefore(新的节点,存在节点)	在父节点内,把新的元素节点插入到已经存在的元素节点的前面
父节点.removeChild(子节点)	删除父节点内部的子节点 remove
obj.cloneNode( true）	克隆(复制)obj节点，可以传一个布尔值为参数，如果参数为true，连同obj子元素一起克隆
父节点.replaceChild(新添加的节点 , 被替换的节点)	替换子节点

三.自定义属性及getAttribute等方法

getAttribute() 获取特定元素节点属性的值，某些低版本浏览器不支持

setAttribute() 设置特定元素节点属性的值，某些低版本浏览器不支持

removeAttribute() 移除特定元素节点属性，某些低版本浏览器不支持

四.outerHTML/innerHTML/innerText

innerHTML:读写元素节点里的内容（包括元素）,从节点起始位置到终止位置全部内容,包括内部的元素。

outerHTML:读写元素节点里的内容（包括元素）,除了包含innerHTML全部内容外, 还包含元素节点本身。

innerText:读写某个元素节点的文本内容。

五.读写css样式的值

1.获取css属性值：仅仅用来读取,没有单位。

offsetWidth、offsetHeight：盒模型的尺寸

offsetLeft、offsetTop：元素相对可视区的位置，无论是否有定位。

offsetParent ：定位父级

2.获取任意的css属性值

getComputedStyle - 标准

六.DOM元素类型

节点可以分为元素节点、属性节点和文本节点...，他们分别用不同的数字代表类型。

例如：元素(1) 属性(2) 文本(3) 注释(8)

每个节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue

七.childNodes节点的集合

childNodes 获取当前元素节点的所有子节点,这里面包含空白节点，但在IE9之前，IE浏览器会自动忽略空白

节点.

childNodes与children的区别

children不考虑空白节点，而childNodes考虑空白节点，而且它们都是类数组。

八.节点的高级选取 - 了解

高级选取：第一个子节点，最后一个子节点，上一个兄弟节点，下一个兄弟节点(包含空白和不包含空白等分成8个属性)

firstChild:第一个子节点(包含空白)

firstElementChild:第一个子节点(不包含包含空白)

previousSibling:上一个兄弟节点(包含包含空白)

previousElementSibling:上一个兄弟节点(不包含包含空白)

......

document 获取document对象

document.documentElement 获取的html标签元素

document.title 获取title标题元素

document.body 获取body标题元素

parentNode 获取当前节点的父节点

九.文档碎片（createDocumentFragment）

文档碎片在理论上可以提高DOM操作的执行效率，将要追加的dom操作先放置在文档碎片中，最后在追加给对应的元素