document squerySelector

2025年6月9日 | 阅读7分钟

document.querySelector() 是一个方法，如果它与指定的选择器或一组选择器匹配，则从文档中返回第一个元素。当 JavaScript 匹配文档中提供的特定元素时，它在 HTML 元素中找到应用。如果没有找到匹配项，则默认返回 null。

另一个名为 querySelectorAll() 的方法用于返回一个静态 NodeList，表示与指定选择器组匹配的文档元素。

语法

参数

对于 querySelector，只考虑一个参数。该参数是选择器本身。选择器用于操作 DOM 字符串，该字符串包含一个或多个要匹配的选择器。请注意，字符不是标准的 CSS 部分，因此在使用选择器时必须用反斜杠进行转义。JavaScript 可以通过反斜杠转义来帮助您做到这一点，因此必须谨慎使用它们。

返回值

如前所述，如果文档中的元素对象与指定选择器下的第一个元素匹配，则返回匹配项。如果找不到此类匹配项，则返回 null。

如果您需要一个包含文档中所有与指定选择器匹配的元素列表，建议改用 querySelectorAll()。

异常

使用 querySelectors() 方法时可能发生两种类型的异常。

SyntaxError。
指定选择器的语法无效。

浏览器兼容性

下图描述了 querySelector 的兼容性。

示例

在此示例中，您将查找与类名为“myclass”的类匹配的第一个元素，并返回该元素。

选择器可以变得更复杂、更强大。它可以被制成，包括 <input> 元素，其名称为“login”，需要放置在 <div> 元素内。类名为“user-panel main”，并且将在文档中返回。要理解这一点，请参见下面的代码。

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

更进一步关于 querySelector，CSS 中的否定也被视为有效字符串，并且默认允许否定选择器。请参阅以下关于否定如何工作的示例。

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

这将选择具有类名为 user-panel 的父 div 元素但不包含 main 类的输入。

现在，您将通过实际示例了解 querySelector() 方法的工作原理。

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-
scale=1.0">
  <title>Document.querySelector</title>
  <link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-
ui/2.3.1/components/button.min.css">
<style>

body { margin: 3em }

.selected { background-color: #eee }

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 50px;
    grid-column-gap:5px;
    margin-bottom: 1em;
}

div>div {
    border: 1px solid #ccc;
}

</style>
</head>
<body>

<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

<button id="first" type="submit" class="ui grey 
button">First</button>
<button id="all" type="submit" class="ui brown 
button">All</button>
<button id="clear" type="submit" class="ui brown 
button">Clear</button>

<script src="main.js"></script>

</body>
</html>

在上面的代码片段中，有五个 div 元素，其中包含三个按钮。每个按钮都应该改变给定 division 的外观。要做到这一点，您需要包含以下代码。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/button.min.css">

现在，您需要使用一些语义化 UI 来样式化 HTML 文档。可以使用以下代码。

选定的 div 现在将具有灰色的背景。此外，要自定义容器，您需要包含以下代码来调整视觉效果。

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px 100px 100px;
    grid-template-rows: 50px;
    grid-column-gap:5px;
    margin-bottom: 1em;
}

保存更改后，由于 CSS 网格布局系统，div 将只显示在一行中。

div>div {
	Border: 1px solid #ccc;
}

容器中的 div 需要保留灰色边框，为此，您必须将 division 类 container 添加到第一个 division 元素中。

<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

由于定义了三个按钮以及五个 div 元素，“First”按钮用于更改第一个内部 div 元素的背景颜色。“All”按钮用于更改所有内部 div 元素，“Clear”按钮用于清除 div 元素的背景。按钮需要具有语义化 UI 样式，以便用户觉得它们具有交互性。

<button id="first" type="submit" class="ui grey button">First</button>

<button id="all" type="submit" class="ui brown button">All</button>

<button id="clear" type="submit" class="ui brown button">Clear</button>

在处理完 HTML 和 CSS 后，您现在需要创建一个引用并开始使用 JavaScript 代码来理解 document.querySelector 方法的应用。要创建引用，请在 HTML 文件中包含以下代码。

接下来，将 JavaScript 代码放在主文件中。

// main.js

document.getElementById("first").onclick = (e) => {

  let tag = document.querySelector(".container div:first-child");

  tag.className = "selected";

};

document.getElementById("all").onclick = (e) => {

  let tags = document.querySelectorAll(".container div");

  tags.forEach( tag => {
      tag.className = "selected";
  });

};

document.getElementById("clear").onclick = (e) => {

  let tags = document.querySelectorAll(".container div");
  tags.forEach( tag => {
      tag.classList.remove("selected");
  });

};

在上述文件中，您通过获取元素的标识名来实现按钮。

已通过 getElementById() 方法将 onClick 侦听器添加到带有 getElementById() 方法的按钮，以提取与之关联的元素。

接下来，您将看到本文主要学习的方法的实现，即 querySelector，然后是以下代码。

在此方法中，您需要选择位于给定容器 div 内的第一个内部 div 元素。接下来，要通过类名添加选定的标签，您需要按以下方式实现该方法。

在此之后，您可以为所有容器 division 实现选择器方法。为此，请使用以下方法。

此外，还定义了标签来引用选定的类名。

tags.forEach(tag => {
	tag.className = "selected";
});

使用 forEach() 循环方法的目的是迭代列表并使用每个元素的标识附加类。

下面的另一个简单示例可用于方便地理解 querySelector 方法。

<!DOCTYPE html>
<html>
   <head>
      <title>DOM Examples</title>
      <style>
            .main {
               font-weight: bold;
            }
      </style>
   </head>
   <body>
      <h1>querySelector Example</h1>
      <p id="description" class="main">
            querySelector's power is exceeded only by it's mystery.
      </p>
      <div id="response">
            It's not that mysterious, querySelector selects elements
            using the same rules as CSS selectors.
      </div>
      <script>
            // selects the <p> using class selector
            let main = document.querySelector(".main");
            console.log(main.innerHTML.trim());
            main.style.color = "blue";

            // Selects the <div> using tag selector
            let response = document.querySelector("div");
            console.log(response.innerHTML.trim());
            response.style.color = "red";
      </script>
   </body>
</html>

输出

querySelector's power is exceeded only by its mystery.
It's not that mysterious, querySelector selects elements
using the same rules as CSS selectors.

在视觉上，输出可能看起来像这样。

类似地，由于 querySelctorAll() 方法也与从主文件中获取所有匹配选择器相关，因此也可以实现它。

<!DOCTYPE html>
<html>
   <head>
      <title>DOM Examples</title>
      <style>
            .red {
               color: red;
            }
            .purple {
               color: purple;
            }
      </style>
   </head>
   <body>
      <h1>querySelectorAll Example</h1>

      <h2>Red Fruits</h2>
      <ul class="red">
         <li>Strawberry</li>
         <li>Raspberry</li>
         <li>Cherry</li>
      </ul>

      <h2>Purple Fruits</h2>
      <ul class="purple">
         <li>Blackberry</li>
         <li>Plums</li>
         <li>Grapes</li>
      </ul>

      <script>
            // Selects ALL the <li> elements and adds text to each one
            let listItems = document.querySelectorAll("li");
            for (let i=0; i < listItems.length; i++) {
               listItems[i].innerHTML += " is yummy"
            }

            // Selects the PURPLE <li> elements and make them bold
            let purpleItems = document.querySelectorAll(".purple li");
            for (let i=0; i < purpleItems.length; i++) {
               purpleItems[i].innerHTML += "!!!"
         }

         // Console log the contents of the first items in each list
         // Remember that querySelector returns only the FIRST match

         let firstRed = document.querySelector(".red li");
         console.log("contents of first red li:", firstRed.innerHTML);
         let firstPurple = document.querySelector(".purple li");
         console.log("contents of first purple li:", firstPurple.innerHTML);

      </script>
   </body>
   </html>

输出

contents of first red li: Strawberry is yummy
contents of first purple li: Blackberry is yummy!!!

在 Web 上，编译结果可能看起来像下图。

document.querySelector 的优势

使用 documents.querySelector() 方法的主要优点是，如果它与指定的选择器匹配，则从文档中获取第一个元素。
选择器方法是动态的。您需要将其与标识名或类名以及标签相关联。
JavaScript 是所有框架和库的语言，这使得使用不同库和框架轻松实现 document.querySelector() 方法变得容易。
document.querySelector() 方法的另一个优势在于，它通过为访问和调试 JavaScript 文件中的每个元素提供动态流程，从而增强了整体编程结构的动态性。

总结

在本教程中，您涵盖了 document.querySelector() 方法的大部分方面。您学习了如何通过设计简单的语义化用户界面将此方法与 HTML 和 CSS 相关联。在后面的部分中，您遇到了一些相关术语，如 querySelectorAll 方法、div 包含和标签类，其中可以选择器作为参数来渲染文档中存在的元素。document.querySelector() 方法在用户希望从文档中返回与选择器匹配的第一个元素的情况下非常有用。如果多个元素匹配选择器，则 querySelector() 方法发挥作用。

下一个主题Volatility-calculator

document squerySelector

语法

参数

返回值

异常

浏览器兼容性

示例

document.querySelector 的优势

总结

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

document squerySelector

语法

参数

返回值

异常

浏览器兼容性

示例

document.querySelector 的优势

总结

相关帖子

Orange Pi vs Raspberry Pi 4

谁发明了留声机

Inkscape 中的图像矢量化

运动类型

销售促销的优缺点

什么是顶点项目

家族企业的优缺点

生态旅游的优缺点

电子邮件的优缺点

跑步 vs 跳绳

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器