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元素。