原生javascript获取元素的几种方法

最新推荐文章于 2024-04-11 16:16:12 发布

站在巨人肩上的猴子

最新推荐文章于 2024-04-11 16:16:12 发布

阅读量3k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_33775006/article/details/106210600

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

说明：日常开发中，我们常常遇到需要获取DOM对象，对对象元素进行修改情况，一般就会从Id、class、标签等去获取，下面就介绍几种方法，基本涵盖了所有的获取方法

方法简介：
1、通过ID获取（getElementById）
2、通过name属性（getElementsByName）
3、通过标签名（getElementsByTagName）
4、通过类名（getElementsByClassName）
5、通过CSS选择器获取（querySelector、querySelectorAll）

具体说明：
1、通过ID获取；
js代码：

var domById  = document.getElementById('id');

html元素：

<div id = 'id'></div>

注意：
1）、如果没有指定 ID 的元素返回 null；
2）、如果存在多个指定 ID 的元素则返回第一个；
3）、该方法是document级别的，并且只能在当前document中查找，无法跨document

2、通过name属性获取；
js代码：

var domByName = document.getElementsByName('name');

html元素

<div name = 'name'></div>

注意：
1）、因为一个document中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以getElementsByName() 方法返回的是元素的数组，而不是一个元素；
2）、该方法与getElementById一样是document级别的，并且只能在当前document中查找，无法跨document。

3、通过标签名获取；
js代码：

//document级别
var domByTagName = document.getElementsByTagName('div');
//元素（element）级别
var domById = document.getElementById('id');
var domByTagName = domById.getElementsByTagName('span');

html代码：

<!--document级别-->
<div></div>
<!--element级别-->
<div id = 'id'>
	<span></span>
	<span></span>
</div>

注意：
1）、document中有很多标签，一般情况下，标签都不会是唯一的，所以该方法的返回对象是一个集合；
2）、参数值 “*” 返回document中的所有元素；
3）、该方法可以是document级别，也可以是element级别，可以缩小范围，精准获取元素。

4、通过类名获取；
js代码：

//document级别
var domByClassName = document.getElementsByClassName('className');
//元素（element）级别
var domById = document.getElementById('id');
var domByClassName = domById.getElementsByClassName('className');

html代码：

<!--document级别-->
<div></div>
<!--element级别-->
<div id = 'id'>
	<span class = 'className'></span>
	<span class = 'className'></span>
</div>

注意：
1）、document中有很多class同名的元素，所以该方法的返回值是一个集合；
2）、该方法可以是document级别，也可以是element级别，可以缩小范围，精准获取元素。

5、通过CSS选择器获取；
js代码：

//取得 body 元素
var body = document.querySelector("body"); 
//取得 ID 为"myDiv"的元素
var myDiv = document.querySelector("#myDiv"); 
//取得类为"selected"的第一个元素
var selected = document.querySelector(".selected"); 
//取得类为"selected"的全部元素
var selecteds = document.querySelectorAll(".selected");

html代码：

<body>
	<div id = 'myDiv'></div>
	<div class='selected'></div>
	<div class='selected'></div>
</body>

注意：
1）、CSS 选择符可以简单也可以复杂，视情况而定，如果传入了不被支持的选择符，querySelector()、querySelectorAll()会抛出错误;
2）、如果没有找到匹配的元素，返回值就是空的；
3）、该方法可以是document级别，也可以是element级别，可以缩小范围，精准获取元素。

小结：
以上仅介绍了用法和一些注意事项，具体更深入的知识点，需要去了解其原理（比如CSS选择符之类的）。

参考资料：
1、 w3school
2、JavaScript高级程序设计（第3版）

站在巨人肩上的猴子

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生javascript获取元素的几种方法

说明：日常开发中，我们常常遇到需要获取DOM对象，对对象元素进行修改情况，一般就会从Id、class、标签等去获取，下面就介绍几种方法，基本涵盖了所有的获取方法方法简介：1、通过ID获取（getElementById）2、通过name属性（getElementsByName）3、通过标签名（getElementsByTagName）4、通过类名（getElementsByClassName）5、通过选择器获取（querySelector、querySelectorAll）具体说明：...
复制链接

扫一扫