JavaScript可以通过多种方式来获取DOM元素对象，下面我们做一番总结

1 通过 ID 选取元素

1.1 document.getElementById(idName)

<div id="box"></div>

document.getElementById('box');

1.2 id 属性可自动成为被脚本访问的全局变量

<div id="box"></div>

// 会自动生成名为 box 的全局变量，执行 id 为 box 的元素； 无需额外获取
console.log(box);   //<div id="box">...</div>

2 通过 Name 属性值选取元素

2.1 document.getElementsByName(attrValue)

• 该方法返回 NodeList 对象，会返回 name 属性等于某个值的所有元素
• 注意 IE9+ 以及 其他非IE浏览器， 认为所有的元素都有 name 属性
• 注意 IE8- 认为只有部分元素有 name 属性， form、所有的表单控件元素、img、iframe、embed、object 等

2.2 docuemnt 会为某些元素创建以元素 name 属性值为名字的属性

document.myelemnt;  // 会获取 name 数值型为 myelement 的 form 元素 或者 img 元素
document.myform;    // 会获取 name 数值型为 myform 的 form 元素 或者 img 元素

• 此种方式可以获取 form 元素 或 img 元素
• 如果 name 属性值符合的只有一个元素，就返回改元素
• 如果 name 属性值符合的有多多个元素，就返回所有满足条件元素组成的数组

3 通过标签名选取元素

3.1 getElementsByTagName(tagName)

docuemnt.getElementsByTagName(tagName);  // 从整个文档中获取指定的元
element.getElementsByTagName(tagName);   // 从 element 元素的后代元素中获取指定元素

• 改方法返回一个 HTMLCollection 对象，该对象是所有满足条件的元素组成的集合。
• 如果满足条件的元素只有一个，仍然返回只有一个成员的集合。

3.2 docuemnt 会为某些元素创建以元素标签名为名字的属性

docuemnt.body;               // body 元素
document.documentElement;    // 根元素，也就是html元素
document.head;               // head 元素
document.images;             // 所有的 img 元素的引用
document.links;              // 所有的超链接的引用 a[href] 元素 或 area 元素
docuemnt.anchors;            // 所有的锚点的引用 a[name]
docuemnt.formsl              // 所有 form 表单的引用

4 通过 class 名选择元素

该方法需要 IE9 以及以上版本和其他非IE浏览器支持

document.getElementsByClassName(className);   // 从整个文档中获取指定的元素
element.getElementsByClassName(classNmae);    // 从 element 元素的后代元素中获取指定元素

5 通过 CSS 选择器选择元素

该方法需要 IE8 以及以上版本和其他非IE浏览器支持;
由于 IE8- 的占有率逐年减少，我们强烈推荐这种方式来获取元素；

document.querySelectorAll();     //  从整个文档中获取所有满足条件的元素
element.querySelectorAll();      //  从 element 元素的后代元素中中获取所有满足条件的元素

document.querySelector();        // 从整个文档中获取满足条件的第一个元素
element.querySelector();         // 从 element 元素的后代元素中中获取满足条件的第一个元素

6 获取所有的元素

document.all

该属性返回文档中的所有元素组成的集合。