JavaScript获取文档元素

本文原创地址链接：http://blog.youkuaiyun.com/zhou_xiao_cheng/article/details/53159348，未经博主允许不得转载。
HTML原本只是一个静态的网页，但是JavaScript脚本的出现，使得这个静态的网页变成了一个可以进行交互的Web应用软件。
若你写了一个HTML文档，并在里面引入JavaScript脚本，通常，浏览器都是按从上到下的顺序解析这个HTML文档的（存在异步请求的情况除外），当解析到JavaScript脚本时，JavaScript脚本就开始执行。因此，按照这个解析规则，HTML文档引入JavaScript脚本的位置就显得很重要了，举个栗子：有两个脚本分别是A和B，B需要使用A中的某个方法，那么，引入脚本时，Ａ就要在Ｂ的前面。
如果JavaScript脚本中包含操作文档元素的代码，那么JavaScript首先必须要获取到文档元素（即Element对象），主流方法一共有四种：

• 通过id获取文档元素

  HTML：
  <div id="item">
  </div>
  
  JS：
  console.log(document.getElementById('item'));
  
  输出结果：
  "<div id='item'>
  </div>"

  输出的便是我们需要的Element对象了。这是最简单的一种获取文档元素的方法，并且，因为在一个文档中，id属性值都是唯一的，因而这种获取文档元素的方法也是最高效的。

• 通过名字获取文档元素

  HTML：
  <div name="item">
  </div>
  
  JS：
  console.log(document.getElementsByName('item'))
  
  输出结果：
  实时NodeList对象（类数组对象）

  获取到的是一个类数组对象，想要获取到Element对象，加上相应的索引即可，如：document.getElementsByName('item')[0]。
  注意：getElementsByName()定义在HTMLDocument类里，所以只对HTML文档适用，并且，在有的浏览器版本中，getElementsByName()也会返回符合id属性值 = name属性值的结果，为了避免这种情况，不建议使用这种方法去获取文档元素，同时，id的属性值与name的属性值最好不要相同。

• 通过标签名获取文档元素

  HTML：
  <div>
    <span></span>
  </div>
  
  JS：
  console.log(document.getElementsByTagName('div'))
  
  输出结果：
  HTMLCollection对象（类数组对象）

• 通过选择器获取文档元素

  HTML：
  <div class="item">
    <span></span>
  </div>
  
  JS：
  console.log(document.querySelectorAll('.item'))
  
  输出结果：
  非实时NodeList对象

  利用querySelectorAll()方法，客户端JavaScript脚本可以选择任意的文档元素进行操作，这种获取文档元素的方法可以说是终极大boss,因为所有的浏览器都支持该方法。它返回的是一个非实时的NodeList对象（即当该方法执行时，返回一个选择器所匹配到的元素的NodeList对象，当文档后面发生改变时，选择器所匹配到的元素可能已经发生了改变，但NodeList对象并不会因为文档的改变而更新）。
  除了这个方法之外，还有querySelector()方法，与querySelectorAll()方法不同，该方法则是直接返回Element对象。