DOM简介及查询

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
HTML DOM 模型被构造为对象的树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素

• 通过标签名找到 HTML 元素

• 通过类名找到 HTML 元素

node.getElementById(“id”)__通过 id 查找 HTML 元素
实例：

node.getElementsByTagName(“TagName”)__通过标签名查找一组 HTML 元素
注意，这个方法给我们返回一个类数组对象，所有查找到的元素都会封装到对象中
实例：

node.getElementsByName(“Name”)__通过name属性查找一组 HTML 元素
注意，这个方法也是返回一个类数组

获取元素节点的子节点
通过具体的元素节点调用
1.getElementsByName（）
-方法，返回当前节点的指定标签名后代节点

2.childNodes
-属性，表示当前节点的所有子节点
但是注意：childNodes属性会获取包括文本节点在内的所有节点，根据DOM标签 标签间空白处也会当成文本节点（IE8及以下浏览器中，不会将空白文本当做子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是9个）

另外补充一点，可以使用children属性，可以获取当前元素的所有子元素

3.firstChild
-属性，表示当前节点的第一个子节点（包括空白文本节点）


弹出undefined是因为获取到的是：父节点ul跟子节点li之间的空白文本节点！
如果想不删掉空白文本节点，可以使用firstElementChild（不兼容IE8及以下浏览器）来获取当前元素的第一个子节点

4.lastChild
-属性，表示当前节点的最后一个子节点（跟firstChild一样，也包括空白文本节点）

获取父节点和兄弟节点
通过具体的节点调用
1.parentNode
-属性，表示当前节点的父节点
2.previousSibling
-属性，表示当前节点的前一个兄弟节点
3.nextSibling
-属性，表示当前节点的后一个兄弟节点

DOM查询的其他方法
1.在document中有一个属性body，它保存的是body的引用

var body = document.body;

2.document.documentElement保存的是html根标签

var html = document.documentElement;

3.document.all代表页面中所有元素

var all = document.all;

4_①.根据元素的class属性值来查询一组元素节点对象
getElementsByClassName（）可以根据class属性值获取一组元素节点对象，不支持IE8及以下浏览器

var box = document.getElementsByClassName（"box"）;

4_②.虽然IE8中没有getElementsByClassName（）但是可以使用querySelector（）代替
document.queryselector（）

需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
缺点是该方法总会返回一个唯一的一个元素，如果满足条件的元素多个，那么它只会返回第一个！

var div = document.querySeletor（".box1 div"）;

var box1 = document.querySeletor（".box1"）;

4_③document.querySeletorAll（）

该方法和querySeletor（）类似，不同的是它会将符合条件的元素封装到一个数组中返回，即时符合条件的只有一个，他也会返回数组

var box2 = document.querySeletorAll（".box2"）；