×

2024年了,您还记得 querySelector() 和 querySelectorAll() 方法吗?

作者:andy0012024.02.29来源:Web前端之家浏览:4706评论:1
关键词:querySelectorAll

2024年了,您还记得 querySelector() 和 querySelectorAll() 方法吗?

现在的出来的很多前端新手,一味的去钻研依赖框架的前端开发,而丢掉了很多基础知识,其实是不可取的,基础非常重要。今天我们来聊聊querySelector() 和 querySelectorAll() 方法,您是否还有印象吗?

document.querySelector()

文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项,则返回null

备注: 匹配是使用深度优先先序遍历,从文档标记中的第一个元素开始,并按子节点的顺序依次遍历。


语法


element = document.querySelector(selectors);

参数

  • selectors

  • 包含一个或多个要匹配的选择器的 DOM 字符串DOMString。该字符串必须是有效的 CSS 选择器字符串;如果不是,则引发SYNTAX_ERR异常。

备注: 必须使用反斜杠字符转义不属于标准 CSS 语法的字符。由于 JavaScript 也使用退格转义,因此在使用这些字符编写字符串文字时必须特别小心。


返回值

表示文档中与指定的一组 CSS 选择器匹配的第一个元素,一个 Element对象。如果没有匹配到,则返回 null。

如果你需要与指定选择器匹配的所有元素的列表,则应该使用querySelectorAll() 。

异常

  • SYNTAX_ERR

  • 指定selectors的语法无效。

注意

如果选择器是一个 ID,并且这个 ID 在文档中错误地使用了多次,那么返回第一个匹配该 ID 的元素。

CSS 伪类不会返回任何元素,见 Selectors API 中的相关规定。

转义特殊字符

如果要匹配的 ID 或选择器不符合 CSS 语法(比如不恰当地使用了冒号或者空格),你必须用反斜杠将这些字符转义。由于 JavaScript 中,反斜杠是转义字符,所以当你输入一个文本串时,你必须将它转义两次(一次是为 JavaScript 字符串转义,另一次是为 querySelector 转义):


<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log("#foo\bar"); // "#fooar"
  document.querySelector("#foo\bar"); // 不匹配任何元素

  console.log("#foo\\bar"); // "#foo\bar"
  console.log("#foo\\\\bar"); // "#foo\\bar"
  document.querySelector("#foo\\\\bar"); // 匹配第一个 div

  document.querySelector("#foo:bar"); // 不匹配任何元素
  document.querySelector("#foo\\:bar"); // 匹配第二个 div
</script>

示例


查找第一个匹配 class 属性的 html 元素

这个例子中,会返回当前文档中第一个类名为 "myclass" 的元素:


var el = document.querySelector(".myclass");

一个更复杂的选择器

选择器也可以非常强大,如以下示例所示.

这里,一个 class 属性为"user-panel main"的 div 元素<div>(<div class="user-panel main">) 内包含一个 name 属性为"login"的 input 元素<input> (<input name="login"/>) ,如何选择,如下所示:

var el = document.querySelector("div.user-panel.main input[name='login']");

Document.querySelectorAll

概述

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

备注: 此方法基于ParentNode mixin 的querySelectorAll() 实现。


语法


querySelectorAll(selectors)

参数

  • selectors

  • 一个包含一个或多个匹配的选择器的字符串。其必须是一个有效的 CSS 选择器字符串,如果不是,会抛出 SyntaxError 异常。可以通过使用逗号分隔多个选择器来指定它们。

备注: 必须使用反斜杠字符转义不属于标准 CSS 语法的字符。由于 JavaScript 也使用反斜杠转义,因此在使用这些字符编写字符串文字时必须特别小心。


返回值

一个静态 NodeList,包含一个与至少一个指定选择器匹配的元素的Element对象,或者在没有匹配的情况下为空NodeList

备注: 如果 selectors 参数中包含 CSS 伪元素,则返回的列表始终为空。

异常

  • SyntaxError

  • 如果指定的 选择器 不合法,会抛出错误。如$("##div")

示例

获取匹配列表

要获取文档中所有<p>元素的NodeList


var matches = document.querySelectorAll("p");

此示例返回文档中所有<div>元素的列表,其中 class 包含"note"或"alert":

var matches = document.querySelectorAll("div.note, div.alert");

在这里,我们得到一个<p>元素的列表,其直接父元素是一个 class 为"highlighted"div,并且位于 ID 为"test"的容器内。

var container = document.querySelector("#test");
var matches = container.querySelectorAll("div.highlighted > p");

此示例使用属性选择器返回文档中属性名为"data-src"iframe元素列表:


var matches = document.querySelectorAll("iframe[data-src]");

这里,属性选择器用于返回 ID 为"userlist"的列表中包含值为"1""data-active"属性的元素:


var container = document.querySelector("#userlist");
var matches = container.querySelectorAll("li[data-active='1']");

访问匹配项

一旦返回匹配元素的NodeList,就可以像任何数组一样检查它。如果数组为空(即,其length属性为 0),则找不到匹配项。

否则,你只需使用标准数组方法来访问列表的内容。你可以使用任何常见的循环语句,例如:

var highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach(function (userItem) {
  deleteUser(userItem);
});

用户备注

querySelectorAll() 的行为与大多数常见的 JavaScript DOM 库不同,这可能会导致意外结果。


HTML

考虑这个 HTML 及其三个嵌套的<div>


<div class="outer">
  <div class="select">
    <div class="inner"></div>
  </div>
</div>
var select = document.querySelector(".select");
var inner = select.querySelectorAll(".outer .inner");
inner.length; // 1, not 0!


在这个例子中,当在<div>上下文中选择带有"select"类的".outer .inner"时,仍然会找到类".inner"的元素,即使.outer不是基类的后代 执行搜索的元素(".select")。默认情况下,querySelectorAll()仅验证选择器中的最后一个元素是否在搜索范围内。

:scope 伪类符合预期的行为,只匹配基本元素后代的选择器:


var select = document.querySelector(".select");
var inner = select.querySelectorAll(":scope .outer .inner");
inner.length; // 0


您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/jsweibjsidf235234.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

  • afrd afrd  发布于 2024-02-29 17:44:30   回复该评论
  • 是的,现在的新手,一问基础三不知,很难搞。