DOM：document object model 文档对象模型，提供一些属性和方法以操作页面中的元素
获取DOM元素的方法
-
document.getElementById()指定在文档中，基于元素的ID或者这个元素对象 -
[context].getElementsByTagName()在指定上下文（容器）中，通过标签名获取一组元素集合 -
[context].getElementsByClassName()在指定上下文中，通过样式类名获取一组元素集合（不兼容IE6~8） -
document.getElementsByName()在整个文档中，通过标签的NAME属性值获取一组节点集合（在IE中只有表单元素的NAME才能识别，所以一般用来获取表单元素） -
document.head / document.body / document.documentElement获取页面中的HEAD/BODY/HTML三个元素 -
[context].querySelector([selector])在指定上下文中，通过选择器获取到指定的元素对象（不兼容IE6-8） -
[context].querySelectorAll([selector])在指定上下文中，通过选择器获取到指定的元素集合
JS中的节点和描述节点之间关系的属性
节点：Node（页面中所有的东西都是节点）
节点集合：NodeList（getElementsByName / querySelectorAll 获取的都是节点集合）
- 元素节点（元素标签）
- nodeType：1
- nodeName：大写的标签名
- nodeValue：null
- 文本节点
- nodeType：3
- nodeName：'#text'
- nodeValue：文本内容
- 注释节点
- nodeType：8
- nodeName：'#comment'
- nodeValue：注释内容
- 文档节点 document
- nodeType：9
- nodeName：'#document'
- nodeValue：null
描述节点之间关系的属性
-
childNodes：获取所有的子节点（非IE6-8浏览器会把空格和换行当作文本节点处理） -
children：获取所有的元素子节点（子元素标签），但是IE6-8下会把注释也当作元素节点 -
parent：获取父亲节点 -
firstChild：获取第一个子节点 -
lastChild：获取最后一个子节点 -
firstElementChild：获取第一个元素节点（不兼容IE6-8） -
lastElementChild：获取最后一个元素节点（不兼容IE6-8） -
previousSibling：获取上一个哥哥节点 -
nextSibling：获取下一个弟弟节点 -
previousElementSibling / nextElementSibling：获取哥哥和弟弟元素节点
动态增删改元素
-
createElement(element)：创建元素对象 -
createTextNode(text)：创建文本对象 -
appendChild(element)：把元素添加到容器的末尾 -
insertBefore(newElement, targetElement)：把元素添加到指定容器中指定元素的前面 -
cloneNode(true/false)：克隆元素或者节点，true为深克隆，false为浅克隆 -
removeChild(element)：移除容器中的某个元素 -
setAttribute() / getAttribute() / removeAttribute()：设置获取移除元素的自定义属性信息（这种方式是把自定义属性放到元素结构上）
JS盒子模型：在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性（基本上都是有关于样式的）
通过JS盒子模型获取元素的相关值
1.clientWidth&clientHeight：获取当前元素可视区域的宽高（内容的宽高+左右/上下PADDING），和内容是否有溢出无关（和是否设置了OVERFLOW:HIDDEN也无关）
兼容性处理：
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight
2.clientTop & clientLeft：获取(上/左)边框的宽度
3.offsetWidth & offsetHeight：在client的基础上加上border（和内容是否溢出也没有关系）
4、scrollWidth & scrollHeight：真实内容的宽高（不一定是设定的值，因为可能会存在内容溢出，有内容溢出的情况下，需要把溢出的内容也算上）+ 左/上PADDING，而且是一个大概的值 （没有内容溢出和CLIENT一样），在不同浏览器中，或者是否设置了OVERFLOW:HIDDEN都会对最后的结果产生影响，所以这个值仅仅做参考
兼容性处理：
document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight
5.offsetParent：当前盒子的父级参照物
6.offsetTop & offsetLeft：获取当前盒子距离其父级参照物的偏移量(上偏移/左偏移)(注意：当前盒子的外边框开始~父级参照物的内边框)
7.scrollTop & scrollLeft：滚动条卷去的宽度或者高度，在JS盒子模型13个属性中，只有scrollTop/scrollLeft是“可读写”属性，其余都是“只读”属性通过JS盒模型属性获取值的特点
1.获取的都是数字不带单位
2.获取的都是整数，不会出现小数（一般都会四舍五入，尤其是获取的偏移量）
3.获取的结果都是复合样式值（好几个元素的样式组合在一起的值），如果只想获取单一样式值（例如：只想获取PADDING），盒子模型属性就操作不了了获取元素具体的某个样式值
1.[元素].style.xxx操作获取：只能获取所有写在元素行内上的样式
2.获取当前元素所有经过浏览器计算的样式
window.getComputedStyle([元素],[伪类,一般都写null])获取到当前元素所有被浏览器计算过的样式(对象)（IE9+）
[元素].currentStyle获取经过计算的样式（IE6~8）
