首页 >web前端 >js教程 >JavaScript中querySelector()获取HTML元素的方法介绍

JavaScript中querySelector()获取HTML元素的方法介绍

不言
不言原创
2019-01-08 15:54:3216855浏览

QuerySelector()是一种可以从JavaScript 检测和获取任意HTML元素的方法,虽然JavaScript从开始就有可以获得HTML元素的getElemenById()和getElemetnsByClasNamo()等方法,但是,如果使用querySelector(),则可以在jQuery意义上有选择地指定HTML元素,而无需了解id属性值,class属性值等。

JavaScript中querySelector()获取HTML元素的方法介绍

简而言之,就是可以使用querySelector()检索任何HTML元素。

我们先来看一下querySelector()的基本语法

通常将在目标范围上执行querySelector()。

document.querySelector( CSS选择器 )

在这种情况下将对整个document执行querySelector()。可以通过为参数指定类似jQuery的CSS选择器来获取任意HTML元素。

需要注意的是,程序在获取第一个匹配的HTML元素时就会结束。

也就是说,如果要获取多个元素就需要来创建一个循环过程,或者使用我们将在后面会说到的querySelectorAll().

我们继续来看如何使用querySelector()?

获取具有ID和Class属性的HTML元素

示例如下

HTML

<h1 class="sample">标题示例</h1>
<p id="test">内容示例</p>

JavaScript

var elem1 = document.querySelector(&#39;.sample&#39;);
var elem2 = document.querySelector(&#39;#test&#39;);
console.log(elem1);
console.log(elem2);

运行结果如下

JavaScript中querySelector()获取HTML元素的方法介绍

可以看到querySelector()的每个参数都指定了一个CSS选择器。

由此,同样的querySelector()也可以根据参数的指定方法取得任意的HTML要素。

从执行结果中可以看出元素已被获取。

下面我们就来看querySelectorAll()的使用方法

querySelectorAll()可以获取多个HTML元素。

我们先来看一下它的基本语法

document.querySelectorAll(CSS选择器)

这样,指定参数的方法和目标的范围与querySelector()相同。

最大的区别是你可以获得所有匹配的HTML元素!

由于queryselector()只能检索第一个匹配的元素,所以我们获取多个元素就可以使用querySelectorAll()。

我们来看具体的示例

HTML代码

<ul>
  <li class="list">列表1</li>
  <li class="list">列表2</li>
  <li class="list">列表3</li>
</ul>

在该示例中,排列了多个列表元素。

要检索所有此列表元素,可以执行以下操作

JavaScript

var elem = document.querySelectorAll(&#39;.list&#39;);
console.log(elem);

在此示例中,类属性值“list”被指定为querySelectorAll()的参数。

这将指定所有列表元素,因此可以获得所有列表项。

当然,你可以按原样设置“li”元素,但是要注意与其他列表元素的平衡。

querySelectorAll()获取的元素称为NodeList,存储类似于数组的数据结构。

下面我们使用'forEach'一次处理一个元素,它可以有效地重复处理数组。

var elem = document.querySelectorAll(&#39;.list&#39;);
elem.forEach(function(value) {
    console.log(value);
})

运行结果如下

JavaScript中querySelector()获取HTML元素的方法介绍

在此示例中,使用querySelectorAll()获得的结果由forEach语句循环。

通过指定参数“value”,可以像上述结果一样获得每个HTML元素。

注意:可以对使用querySelectorAll()获取的HTML元素执行任意的处理!

以上是JavaScript中querySelector()获取HTML元素的方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn