JavaScript怎么通过querySelectorAll()方法查找html元素-js教程-PHP中文网

JavaScript怎么通过querySelectorAll()方法查找html元素

WBOY

发布： 2022-08-05 16:47:41

原创

2540人浏览过

本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了queryselectorall方法的使用，该方法可以返回文档中匹配指定 css 选择器的所有元素，返回 nodelist 对象，下面一起来看一下，希望对大家有帮助。

JavaScript怎么通过querySelectorAll()方法查找html元素

【相关推荐：javascript视频教程、web前端】

querySelectorAll()方法的定义与用法

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

立即学习“Java免费学习笔记（深入）”；

提示: 你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。

语法为：

elementList = document.querySelectorAll(selectors);

登录后复制

elementList 是一个静态的 NodeList 类型的对象。

selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。

其中的属性值CSS 选择器 String 必须。指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。多个选择器使用逗号(,)分隔。

返回值：

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

一个 NodeList 对象，表示文档中匹配指定 CSS 选择器的所有元素。 NodeList 是一个静态的 NodeList 类型的对象。如果指定的选择器不合法，则抛出一个 SYNTAX_ERR 异常。

示例如下：

获取文档中所有的 <p> 元素，并为匹配的第一个 <p> 元素 (索引为 0) 设置背景颜色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<p>这是一个 p 元素。</p>
<p>这也是一个 p 元素。</p>
<p>点击按钮为文档中第一个 p (索引为 0) 元素设置背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong>Internet Explorer 8  及更早版本不支持 querySelectorAll() 方法。</p>
<script>
function myFunction() {
    var x = document.querySelectorAll("p");
    x[0].style.backgroundColor = "red";
}
</script>
</body>
</html>

登录后复制

输出结果：

+3.gif

获取文档中所有 class="example" 的 <p> 元素，并为匹配的第一个 <p> 元素 (索引为 0) 设置背景颜色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<h2 class="example">使用 class="example" 的标题</h2>
<p class="example">使用 class="example" 的段落</p> 
<p class="example">另外一个使用 class="example" 的段落</p> 
<p>点击按钮为第一个 class="example" (索引为 0) 的 p 元素设置背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong>Internet Explorer 8  及更早版本不支持 querySelectorAll() 方法。</p>
<script>
function myFunction() {
    var x = document.querySelectorAll("p.example");
    x[0].style.backgroundColor = "red";
}
</script>
</body>
</html>

登录后复制

输出结果：

+4.gif