1. getElementById
2. getElementsByTagName
3. getElementsByClassName
4. getElementsByName
5. querySelector
6. querySelectorAll
7. document.head
8. document.body
9. document.documentElement
拓展

1. getElementById

document.getElementById 在文档中通过元素的 ID 属性值来获取元素对象

var box = document.getElementById('box')

getELementById 是获取元素的方法，而 document 限定了获取元素的范围，我们把这个范围称之为：“上下文 [context]”

注意：

（1） getElementById 的上下文只能是 document。因为严格意义上，ID 在整个页面中是唯一的，不能重复。浏览器规定在整个文档中就可以获取这个唯一的 ID。实质上，原因是只有 document 对象的原型上才有 getElementById 方法，所以只能在 document 上才能使用

（2）如果页面中的 ID 重复了，基于这个方法只能获取到第一个元素，后面相同的 ID 元素无法获取。

（3）IE 6/7 下，会把表单元素的 name 属性当作 ID 属性（建议：以后使用表单元素的时候，不要让 name 和 ID 有冲突）

2. getElementsByTagName

[context].getElementsByTagName 在指定的上下文中，通过元素的标签名获取一组元素集合（HTMLCollection）。上下文由我们自己来指定。

注意：

（1）获取的是元素集合，HTMLCollection 对象，结构和数组非常相似（数字作为索引，length 代表长度），但是不是数组，称为“类数组”对象。

（2）集合中的每一项存储的值都是一个元素对象

（3）会把当前上下文中，所有后代层级内的标签都获取到（不仅仅是儿子级的）

（4）基于这个方法获取到的结果永远都是一个集合（不管里面是否有内容，也不管有几项，它只是一个容器），如果想具体操作某一项，需要基于索引获取到才可以

3. getElementsByClassName

[context].getElementsByClassName 在指定的上下文中，通过元素的类名获取一组元素集合（HTMLCollection）。上下文由我们自己来指定。

（1）真实项目中，我们经常基于样式类来给元素设置样式，所以在 JS 中，我们也经常基于样式类来获取元素，但是此方法在 IE6~8 下不兼容

（2）可以通过自己写兼容方法来使用

4. getElementsByName

document.getElementsByName 上下文只能是 document，在整个文档中，基于元素的 name 属性值来获取一组节点集合（NodeList），也是一个类数组。

在 IE9 及以下版本浏览器中，只对表单元素的 name 属性起作用（正常来说：我们在项目中只会给表单元素设置 name，而给非表单元素设置 name 属性，其实是不合规范的操作）

表单元素中设置 name 属性，是用来分组分类的，如单选框、复选框等。

5. querySelector

[context].querySelector 在指定的上下文中，基于选择器（类似于 CSS 选择器）来获取指定的元素对象

获取的是一个元素，哪怕选择器匹配了多个，也只会获取第一个

6. querySelectorAll

[context].querySelectorAll 在 querySelector 的基础上，获取到选择器匹配到的所有元素，结果是一个节点集合（NodeList）

（1）querySelector/querySelectorAll 都是不兼容 IE6~8 浏览器的

（2）不考虑兼容的情况下，我们能用其他方式获取的，也尽量不要用着两个方法，这两个方法性能消耗较大

注意的是，虽然该方法返回的是一个 NodeList 的实例，但是实际上，是带有所有属性和方法的 NodeList，而其底层实现则类似于有一组元素的快照，而非不断对文档进行搜索的动态查询。也就是说，它返回的是一个静态集合。

7. document.head

获取 head 元素对象

8. document.body

获取 body 元素对象

9. document.documentElement

获取 html 元素对象

拓展

//=> 需求：获取浏览器一屏幕的宽度和高度（兼容所有浏览器）
var width = document.documentElement.clientWidth || document.body.clientWidth;
var height = document.documentElement.clientHeight || document.body.clientHeight;

面试题：获取当前页面中所有 ID 为 HAHA 的元素（兼容所有的浏览器）

因为兼容性，不能使用 querySelectorAll
首先获取当前文档中所有的 HTMl 标签
依次遍历这些元素标签，如果 ID 等于 HAHA，就把它存储起来即可

function queryAllById(id) {
  //=> 基于通配符*，获取整个文档中所有的 HTML 标签
  var nodeList = document.getElementsByTagName('*');
  //=> 遍历集合中的每一项，把元素 ID 和传递进来的 ID 相同，则把这一项存储起来
  var arr = [];
  for (var i = 0; i < nodeList.length; i++) {
    var item = nodeList[i];
    item.id === id ? arr.push(item) : null;
  }
  return arr;
}

另外一个浏览器特性：
在 JS 中默认会把元素的 ID 设置为变量（不需要再自己设置），而且如果 ID 重复，获取的结果就是一个集合，包含所有 ID 项，不重复就是一个元素对象（类似 ById 获取的结果）

console.log(HAHA); //=> 直接可以输出这个集合

不推荐使用，因为这是未定义的变量，会产生混乱。但是需要知道浏览器有这样的机制。

JavaScript

DOM 获取元素