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

#原生javascript获取元素的几种方法| 来源: 网络整理| 查看: 265

说明：日常开发中，我们常常遇到需要获取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元素：

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

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

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

html元素

注意： 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代码：

注意： 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代码：

注意： 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代码：

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

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

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

【本文地址】

公司简介

联系我们