详解JavaScript中选取元素的所有方法

DOM中选取文档元素的方法总共有5种：
1.通过id值。
2.通过name属性值。
3.通过指定的标签名。
4.通过class类。

5.通过css选择器。

下面我就这五种方法详细解释一下吧。

1.通过ID选取元素:  document.getElementById()
    任何元素都可以有一个id属性，在文档中该值必须唯一，所以该方法返回一个DOM对象。通过id获取元素是最简单最常用的选取元素的方法。
getElementById(id值)。注意这个方法是Document对象的方法。所以使用方法通常如下：
var el = document.getElementById("id");


2.通过name属性选取元素:  document.getElementsByName()

    多个元素可能有同样的名字，所以该方法返回NodeList对象。
getElementsByName(name值)定义在HTMLDocument类中，而不是在Document类中，所以它只对HTML文档有用，对XML文档无用。
在对form、img、iframe、applet、embed、object元素设置name属性时要注意一点，这些元素的属性值将自动成为window和Document对象的对应属性。所以如果通过name属性值查找以上几个特殊的元素可以像获取属性值一样操作，如：
//针对<form name="wlk">元素，得到Element对象
var form = document.wlk;
但是，不太推荐这样做，最好还是显示的调用getElementsByName()来查找元素。注意，getElementsByName()是HTMLDocument类中的方法，所以使用通常如下：
var el = document.getElementsByName("name");

3.通过标签名查找：getElementsByTagName()
    getElementsByTagName("tagname")也返回NodeList对象，在NodeList对象中返回的元素按照在文档中的顺序排序的。所以可如下获取文档的第一个p元素：
var p = document.getElementsByTagName("p")[0];
HTML标签不区分大小写，故而在使用该方法是也不用区分大小写。如果传参数为通配符*，就返回文档中所有的元素。
该方法给是Element对象的方法，所以你 既可以在document上调用，也可以在element上调用。
像getElementsByName()一样，该方法对form、images等标签也可像操作属性一样操作。如：
document.forms.wlk或者document.forms[1]。当然还是推荐显示调用getElementsByTagName()。


4.通过class属性选取元素：getElementsByClassName()
    getElementsByClassName()方法基于class属性值中的标志符来选取成组的文档元素。 类似getElementsByTagName()，在HTMl文档和HTML元素上都可调用getElementsByClassName()，它的返回值是NodeList对象，且是 实时的。它的参数只需要一个字符串，但该字符串可以由多个空格隔开的标志符组成。只有当元素的class属性值包含指定的标志符时才匹配，不过标志符的顺序无关紧要。
在标准模式下，该方法区分大小写，在兼容模式下，不区分大小写。


5.通过css选择器选取元素：querySelectorAll()和querySelector（）
    querySelectorAll(),它接受包含一个css选择器的字符串参数，返回一个表示NodeList对象。注意，该NodeList对象 不是实时的：它包含在调用时刻选择器所匹配的元素，但它并不更新后续文档的变化。
如果没有匹配的元素，返回空的NodeList对象。如果选择器语法错误，将跑出一个异常。
还有一个querySelector()方法，与querySelectorAll()工作原理一样，不过它只返回第一个匹配的元素，如果没有匹配的，返回null。
这两个方法在 element上也有定义，所有在元素上也可用。
注意，css定义了“:first-line”和“:first-letter”等伪元素，它们在文档中并不是实际元素，所以css选择器选取元素时不会匹配它们。
querySelectorAll()是终极的选取元素的办法：它是一种非常强大的技术，通过它客户端JavaScript程序可以选择它们想要操作的元素。比如jQuery就是基于css选择器的查询作为编程核心，命名为$()。


备注：
    document.all[]。
该方法现在已经废弃 不应该使用了。但是它在最开始引入时是革命性的，难免在比较老的网站或者程序中或遇到。
document.all[0];//选取文档的第一个元素。
document.all["bar"];//选取id或name为bar的元素。
document.all.tags("div");//文档中所有的div元素。