通过DOM API 获取元素的几种常见方法
DOM是什么？
DOM（Document Object Model），文档对象模型，是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 DOM 提供了一种表述形式——将文档作为一个结构化的节点组以及包含属性和方法的对象。
概括地说，DOM构建了脚本或编程语言与文档之间的联系，人们可以通过脚本或编程语言访问DOM，对文档中的元素进行增删改查的操作，通常使用JavaScript访问DOM，但并不局限于JS。DOM提供了一系列的接口（API）便于多种编程语言访问文档中的元素，下面本文将介绍几种常用的通过DOM API获取文档元素的方法。
如何通过DOM API获取元素？
一、通过Document（or Element）调用方法
我们通常会调用以下几种方法来获取文档中的元素：
- Document.getElementById(String id)
var element = document.getElementById('id')
该方法返回一个匹配特定id的元素，'id'为大小写敏感的字符串，如果当前文档中没有匹配的元素，则返回null。
- Document.getElementsByClassName(String className）
var elements = document.getElementsByClassName('classNames') // or:
var elements = rootElement.getElementsByClassName('classNames')
该方法返回一个类似于数组的对象，包含了所有指定class名称的子元素。'classNames'是一个字符串，表示匹配的 class 名称列表，多个 class 名称通过空格分隔。
不仅仅是Document，getElementsByClassName()方法可以在任意的元素上调用，返回以当前元素为根节点的，所有指定class名称的子元素。
- Document.getElementsByTagName(String tagName)
var elements = document.getElementsByTagName('tagName')// or:
var elements = element.getElementsByTagName('tagName')
该方法返回一个包含指定标签的元素的HTML集合（HTMLCollection），'tagName'为一个字符串，当取为'*'时，代表所有元素。同时该HTML集合是动态的，它可以自动更新自己来保持和 DOM 树的同步。该方法在Element上调用时，指定元素的子树会被搜索，不包括元素本身。
- Document.querySelector(String selector)
element = document.querySelector('selectors')// or:
element = baseElement.querySelector('selectors')
document.querySelector()方法返回文档中匹配指定的选择器组的第一个元素，如果在Element上调用该方法，则返回其所调用的元素的后代中第一个与指定选择器匹配的元素。'selectors'是一个字符串，包含一个或多个CSS 选择器，多个则以逗号分隔。
如果没有找到匹配元素，则返回 null，如果找到多个匹配元素，则返回第一个匹配到的元素；如果选择器是一个 ID，并且这个 ID 在文档中错误地使用了多次，那么返回第一个匹配该 ID 的元素；同时，CSS 伪元素不会返回任何元素。
- Document.querySelectorAll(String selector)
elementList = document.querySelectorAll('selectors')// or:
elementList = baseElement.querySelectorAll('selectors')
Document.querySelectorAll(）方法返回与指定选择器组匹配的文档中的元素列表，返回对象为一个non-live（非活动的）的NodeList，如果在Element上调用则返回该元素的后代元素。'selectors'是一个字符串，包含一个或多个CSS 选择器，多个则以逗号分隔。如果 'selectors'参数中包含CSS伪类，则返回一个空的elementList。
二、利用Node的属性获取元素
如果已知一个元素的父元素、子元素、或者相邻元素以及他们之间的关系，那么可以用如下方法获取该元素：
//返回包含指定节点的子节点的一个NodeList集合，该集合为一个live集合
var nodeList = elementNodeReference.childNodes
//返回指定节点的第一个子节点，如果该节点没有子节点，则返回 null
var firstChild = node.firstChild
//返回指定节点的最后一个子节点，如果没有子节点，则返回 null
var lastChild = element.lastChild
//返回指定的节点在DOM树中的父节点。对于Attr，Document，DocumentFragment，Entity，Notation这样的节点，其parentNode属性返回null
parentNode = node.parentNode
//返回当前节点的父元素节点，如果该元素没有父节点，或者父节点不是一个元素节点，则返回null
parentElement = node.parentElement
//返回其父节点的childNodes列表中紧跟在其后面的兄弟节点，如果指定的节点为最后一个节点，则返回 null
nextNode = node.nextSibling
//返回当前节点的前一个兄弟节点，如果没有则返回null
previousNode = node.previousSibling
小结
以上，就是通过DOM API获取文档元素的一些常见办法，基本可以满足我们的日常工作需求。其他获取元素的方法，就待未来进一步的深入学习来补充完善。
