×

querySelector用法:一起学习下querySelector的基础知识和应用

作者:Terry2023.08.11来源:Web前端之家浏览:2386评论:0

蛮久没讨论陈旧的话题了,今天来回忆一个很基础的方法:querySelector用法。

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

语法


element = document.querySelector(selectors);


参数

  • selectors

  • 包含一个或多个要匹配的选择器的 DOM 字符串DOMString。该字符串必须是有效的 CSS 选择器字符串;如果不是,则引发SYNTAX_ERR异常。请参阅使用选择器定位 DOM 元素以获取有关选择器以及如何管理它们的更多信息。

返回值

表示文档中与指定的一组 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']");

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

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

发表评论: