1: 获取文档元素的方法有7个
1: getElementById(id) ［通过id获取］2: getElementsByName(name) ［通过元素的name属性获取］3: getElementsByTagName(tagName) ［通过Tag名字获取］4: getElementsByTagNameNS(nameSpace, tagName) ［通过值得namSpace下的Tag名字获取］ 5: getElementsByClassName(className)［通过元素CSS类名字获取］6: querySelectorAll(cssQuery) ［通过匹配CSS选择器获取匹配的所有元素］7: querySelector（cssQuery）［通过匹配CSS选择器获取匹配的第一个元素］
其中:
1: 在方法名上，除了ById是单数的'Element', 其他都是复数的'Elements'2: 返回HTMLElement类型的有: getElementById() querySelector() 3: 其余都是返回NodeList或者HTMLCollection4: 同时定义在Document和Element上的方法有： getElementsByClassName() getElementsByTagName() getElementsByTagNameNS() querySelectorAll() querySelector()
先来对以上几点进行点直观的感受，假如我们的HTML代码是这样的：
item list
- book 1
- book 2
- Cat 1
- Cat 2
1: 返回HTMLElement的nodeList的区别
2: 同时定义在Document和Element上的方法区别
bookItem是在Element元素(bookList[0])上使用getElementsByTagName()得到的结果，而allLi是在document上使用getElementsByTagName()得到的结果。可以看出在某个HTMLElement元素上使用获取dom元素的话，结果只会返回此元素的后代节点里满足查询条件的节点，而document上使用，会返回整个文档里面的满足查询条件的全部节点。
接下来对以上6个方法进行具体的讲解：1: getElementById(id)
var pageTitle = document.getElementById('pageTitle'); 没什么好说的，传入元素id的值，返回HTMLElement。
浏览器特性：1: 在低于IE 8浏览器中，getElementById()对id不区分大小写。2: 在低于IE 8浏览器中，也返回匹配name属性的元素。
2: getElementsByName(name)
var elements = document.getElementsByName('xxx'); 通过元素的name属性选取元素，返回NodeList对象，包含若干Element对象的只读数组
特别注意：
1: getElementsByName()定义在HTMLDocument类中，而不是Document类中，所以只能在HTML文档可以用，在XML文档里不可以用。2: 在IE中此方法也返回id属性匹配的元素3: 为某些HTML元素设置name属性，会在Document对象上设置同名的属性（如果此属性名不存在）
针对以上第3点解释一下：
在document上自动创建了以name的值为名字的属性：‘logo’和‘infoForm’。如果HTML里面只有一个元素的name是这个值，那通过document的属性去取值，返回这个HTMLElement对象；如果有多个元素的name是这个值，那就返回包含这些元素的NodeList对象。
3: getElementsByTagName(tagName)
var spanElements = document.getElementsByTagName('span'); 传入tag的名称，递归地获取匹配的元素，先看一段代码
parent childSibling
从返回结果的NodeList对象的元素顺序来看，它会递归地把某个节点都查询完，然后再去查询它的兄弟节点。
特别注意：1: 因为HTML不区分大小写，所以这个方法对tag名也不区分大小写，就是说如果查询‘span’,同时也会匹配‘’元素2: 如果传入通配符'*',会获得一个代表真哥哥文档中元素的NodeList对象。例如： 
4: getElementsByClassName(className)
var elements = document.getElementsByClassName('red'); 通过匹配元素的class的值来获取元素。参数为包含全部class值的字符串(class前面不加'.')，当某个元素的class值有多个时，参数用空格隔开。
可以看到查询结果不包含第一个<p>元素，因为它的class里面没有‘bold’;结果包含第三个<p>元素，因为它的class包含参数里面的所有class名，即使它自己本身还多出一个别的class。所以这是一个“包含全部”而不是“完全相等“的查询。
5: querySelectorAll(cssQuery)
var elements = document.querySelectorAll(‘.bookList li’);
参数为一个字符串，内容为和CSS语法一样的，css选择器(通过'.', '#'等来区分是class还是id之类的值)。结果返回NodeList对象
- book 1
- book 2
- cat 1
- cat 2
其实很类似于jQuery的选择元素的方法，而querySelectorAll()也是解决获取页面元素的终极方法。
6: querySelector(cssSelector)
var element = document.querySelector('.red'); 它的用法与querySelectorAll()相似，但是有两个区别：
1: querySelector()只返回匹配的第一个元素2: querySelector()返回结果为HTMLElement, 而不是一个包含一个元素的NodeList对象