DOM树
当浏览器加载html页面时，首先就是DOM结构的计算，计算出来的DOM结构就是DOM树（把页面中的HTML标签像树桩结构一样，分析出之间的层级关系）
HTML代码
<!doctype html>
<html>
<head>
<meta charset='htf-8'><title>丸子</title>
</head>
<body>
<div class="box" id="box">
<ul>
<li>电影</li>
<li>新闻</li>
<li>音乐</li>
</ul>
<div>最新电影</div>
<div>最新新闻</div>
<div>最新音乐</div>
</body>
dom数描述了标签与标签之间的关系（节点间的关系），我们只要知道任何一个标签，都可以依据DOM中提供的属性和方法，获取页面中任意一个标签或节点
在JS中获取DOM元素的方法
“getElementById”
通过元素的ID获取指定的元素对象，使用的都是document.getElementById('')此处document是限定了获取元素的范围，我们把它称之为上下文context
1、getElementById的上下文只能是document
因为严格意义上，一个页面中的ID是不能重复的，浏览器规定的整个文档中只可以获取这个唯一ID
2、如果页面中的ID重复了，我们基于这个方法只能获取到第一个元素，后面相同ID元素无法获取
3、在IE6-7浏览器中，会把表单元素input的name属性值当作ID来使用（建议以后使用表单元素的时候，不要让name和id的值有冲突）
"getElementByTagName"
[context].getElementsByTagName在指定的上下文中，根据标签名获取到一组元素集合HTMLCollection
1、获取的元素集合是一个类数组
2、他会把当前上下文，子子孙孙层级内的标签都获取到（不仅仅是儿子级的）
3、基于这个方法获取到的结果永远都是一个集合（不管里面是否有内容，也不管有迹象，他是一个容器或者集合），如果想操作集合中具体的某一项，需要基于索引获取到才可以
"getElementByClassName"
在指定的上下文中，基于元素的样式类名（class='xxx'）获取到一组元素集合
1、真实项目中，我们经常基于样式类来给元素设置样式，所以在JS中，我们也会经常基于样式类来获取元素，但是此方法在IE6-8下不兼容
"getElementsByName"
document.getElementsByName()他的上下文只能是document，子啊这边给个文档中，基于元素name属性值获取的一组节点集合（也是一个类数组）
"querySelector"
'[context].querySelector()'在指定的上下文中基于选择器（类似于CSS选择器）获取到指定的元素对象（获取的是一个元素，哪怕选择器匹配到了多个，我们也只获取第一个）
"querySelectorAll"
在querySelector的基础上，我们获取到选择器匹配的所有元素，结果是一个节点集合（nodelist）
1、querySelector/querySelectorAll都是不兼容IE6~8浏览器的（不考虑兼容的情况下，我们是能用byid获得其他方式获取的，也尽量不要用这两个方法，这两个方法性能消耗较大）
"document.head"
获取head元素对象
"document.body"
获取body元素对象
"document.documentElement"
获取HTML元素对象
面试题：获取当前页面中所有ID项
