JS中获取DOM的方法

getElementById通过元素ID获取

此方法的上下文只能是document。

一个HTML页面中元素的ID理论上是不能重复的，但是重复了页面中也不会报错
1、如果页面中的ID重复了，我们获取的是第一个ID对应的元素对象。
2、在IE7及更低版本浏览器中，会把表单元素的name值当做ID来识别。（项目中尽量不要让表单的name和其他的元素的ID相同）
3、如果我们把JS放在结构的下面，我们可以直接使用ID值获取这个元素（不需要通过getElementById获取），而且这种方式会把页面中所有ID是他的元素都获取到（元素对象/元素集合） ===》 此方法不推荐

getElementsByTagName 通过元素标签名获取

此方法的上下文可以自己来定的

获取到的结果是一个元素集合（类数组集合）

1、获取的结果是集合，哪怕集合中只有一项，我们想要操作的是这一项（元素对象），需要先从集合中获取出来，然后再操作。
2、在指定的上下文中，获取所有子子孙孙元素中标签名叫做这个的(后代筛选)

getElementsByClassName 通过元素的类名获取

上下文可以随意指定
获取的结果是一个类数组

1、真实项目中我们经常会通过样式类名来获取元素，getElementsByClassName这个方法在IE6~8浏览器中是不兼容的

getElementsByName 通过元素的name属性获取

通过元素的name属性值获取一组元素（类数组：节点集合 NodeList）
它的上下文也只能是document
IE浏览器只能识别表单元素的name属性值，所以我们这个方法一般都是用来操作表单元素的

document.documentElement / document.body
获取HTML或者BODY（一个元素对象）
获取一屏的高度

document.documentElement.clientWidth||document.body.clientWidth //clientHeight  JS中操作盒子模型的属性，获取可是区域的高度。  

querySelector / querySelectorAll

在IE6~8下不兼容，而且也没什么特别好办法处理它的兼容，所以这两个方法一般多用于移动端开发使用

querySelector：获取一个元素对象

querySelectorAll：获取的是一个元素集合

只要是CSS支持的选择器，这里大部分都支持