DOM是什么？
DOM -> Document Object Model （文档对象模型），DOM其实就是一个对象，而且是一个宿主对象，不再是由ECMAScript提供的，而是由浏览器提供的一种方法表示或者操作HTML或XML
JavaScript 有三种对象：
- 本地对象（Native Object）：Object、Function 、Array、String、Number、Boolean、Error、EvalError、SyntaxError、RangeError、ReferenceError、TypeError、 URIError、Date、RegExp
- 内置对象（Built-in Objecy）: Global、Math
- 宿主对象（Host Object）：执行JS脚本的环境提供的对象，又称浏览器对象
注： 本地对象和内置对象都是ECMAScript的内部对象，宿主对象因为浏览器的不同，所以就出现了兼容性的问题。
document对象
获取元素的方法都继承与Document的原型上
- document.getElementById() 获取的是单个元素
- document.getElementsByTagName() 获取的是一个集合（类数组）
- document.getElementsByClassName() 获取的是一个集合（类数组）兼容性：IE8及以下没有该方法
- querySelector() 如果有相同的元素，获取的是第一个元素
- querySelectorAll() 获取的是一个集合（类数组）
注: querySelector 与 querySelectorAll 有性能方面的问题且不实时。性能方面的问题不好展示，下面我用代码来演示这个方法不实时的问题。
index.html
<div>1</div>
<div>2</div>
<div>3</div>
index.js
var divs = document.querySelectorAll('div');
console.log(divs);
divs[0].remove();
console.log(divs);
第二次打印还是会打印出三个div。
节点树
节点 节点号（nodeType）
- 元素节点 -> 1
- 属性节点 -> 2
- 文本节点 -> 3
- 注释节点 -> 8
- document -> 9
- DocumentFragment -> 11
parentNode 获取父节点
childNodes 获取子节点集合
firstChild 获取第一个子节点
lastChild 获取最后一个子节点
nextSibling 获取下一个同级节点
previousSibling 获取上一个同级节点
hasChildNodes() 返回一个布尔值，判断是否有子节点
元素树
parentElement 获取父元素 IE9及以下不支持
children 获取子元素集合 IE7及以下不支持
firstElementChild 获取第一个子元素 IE9及以下不支持
lastElementChild 获取最后一个子元素 IE9及以下不支持
nextElementSibling 获取下一个同级元素 IE9及以下不支持
previousElementSibling 获取上一个同级元素 IE9及以下不支持
我们发现childNodes兼容性要比children好，但是childNodes会获取到所有的子节点，而children只会获取所有的子元素。我们可以通过nodeType属性来封装一个children功能的方法。
function elemChildren (node) {
var arr = [],
children = node.childNodes; // 类数组 所有的子节点集合
for (var i = 0; i < children.length; i++) {
var item = children[i];
if (item.nodeType === 1) { //nodeType === 1 的为元素节点
arr.push(item); // 将元素节点push到数组中
}
}
return arr;
}
