详解JavaScript中选取元素的所有⽅法
DOM中选取⽂档元素的⽅法总共有5种：
1.通过id值。
2.通过name属性值。
3.通过指定的标签名。
4.通过class类。
5.通过css选择器。
下⾯我就这五种⽅法详细解释⼀下吧。
1.通过ID选取元素:  ElementById()
html document是什么任何元素都可以有⼀个id属性，在⽂档中该值必须唯⼀，所以该⽅法返回⼀个DOM对象。通过id获取元素是最简单最常⽤的选取元素的⽅法。
getElementById(id值)。注意这个⽅法是Document对象的⽅法。所以使⽤⽅法通常如下：
var el = ElementById("id");
2.通过name属性选取元素:  ElementsByName()
多个元素可能有同样的名字，所以该⽅法返回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 = ElementsByName("name");
3.通过标签名查：getElementsByTagName()
getElementsByTagName("tagname")也返回NodeList对象，在NodeList对象中返回的元素按照在⽂档中的顺序排序的。所以可如下获取⽂档的第⼀个p元素：
var p = ElementsByTagName("p")[0];
HTML标签不区分⼤⼩写，故⽽在使⽤该⽅法是也不⽤区分⼤⼩写。如果传参数为通配符*，就返回⽂档中所有的元素。
该⽅法给是Element对象的⽅法，所以你 既可以在document上调⽤，也可以在element上调⽤。
像getElementsByName()⼀样，该⽅法对form、images等标签也可像操作属性⼀样操作。如：
document.forms.wlk或者document.forms[1]。当然还是推荐显⽰调⽤getElementsByTagName()。
4.通过class属性选取元素：getElementsByClassName()
getElementsByClassName()⽅法基于class属性值中的标志符来选取成组的⽂档元素。 类似getEleme
ntsByTagName()，在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元素。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。