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

详解JavaScript中选取元素的所有方法相关推荐

html字符串转成数组,图文详解JavaScript中字符串转换为数组的方法
在前端开发中经常需要使用JavaScript,那你知道怎么将JS字符串转换为数组吗?这篇文章就和大家讲讲JS将字符串转换为数组的方法,感兴趣的朋友可以参考一下,希望可以帮助到你. 之前一篇文章已经给大 ...
详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法转载 2015-11-11 投稿:mrr 我要评论本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
php插入友情链接,PHP_详解WordPress中添加友情链接的方法，友情链接对于一个每个独立博 - phpStudy...
详解WordPress中添加友情链接的方法友情链接对于一个每个独立博客来说可以说是必须的,有不少人选择在侧边栏加入友情链接栏目,但建立一个独立的友情链接页面也是一个不错的选择.用插件可以轻松做到这一 ...
mysql 日期比较_详解Mysql中日期比较大小的方法
假如有个表product有个字段add_time,它的数据类型为datetime,有人可能会这样写sql: 代码如下 select * from product where add_time = '2 ...
详解Mysql中日期比较大小的方法
假如有个表product有个字段add_time,它的数据类型为datetime,有人可能会这样写sql: 代码如下 select * from product where add_time = '2 ...
详解WordPress中添加友情链接的方法
详解WordPress中添加友情链接的方法友情链接对于一个每个独立博客来说可以说是必须的,有不少人选择在侧边栏加入友情链接栏目,但建立一个独立的友情链接页面也是一个不错的选择.用插件可以轻松做到这一 ...
html中删除指定数组下标,图文详解JavaScript中删除数组某个元素的方法
在前端开发中经常需要使用JavaScript,那你知道如何用JS删除数值的指定元素吗?这篇文章就给大家分享JS删除数组某个元素的几种方法,感兴趣的朋友可以参考一下,希望可以帮助到你. 方法一:slic ...
前端中unescape是什么意思_详解JavaScript中的Unescape()和String() 函数
JavaScript中的Unescape()和String() 函数详解,具体内容如下所示: 定义和用法 JavaScript unescape() 函数可对通过 escape() 编码的字符串进行解 ...
详解JavaScript中的this
JavaScript中的this总是让人迷惑,应该是js众所周知的坑之一. 个人也觉得js中的this不是一个好的设计,由于this晚绑定的特性,它可以是全局对象,当前对象,或者-有人甚至因为坑大而不 ...

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

详解JavaScript中选取元素的所有方法相关推荐

最新文章

热门文章