JavaScript querySelector：通过 CSS 选择器选择元素

摘要：在本教程中，您将学习如何使用 JavaScript 的 querySelector() 和 querySelectorAll() 方法根据 CSS 选择器查找元素。

JavaScript querySelector() 和 querySelectorAll() 方法简介

querySelector() 是 Element 接口的一种方法。querySelector() 方法允许您选择与一个或多个 CSS 选择器匹配的第一个元素。

以下说明了 querySelector() 方法的语法

let element = parentNode.querySelector(selector);Code language: JavaScript (javascript)

在此语法中，selector 是 CSS 选择器或 CSS 选择器组，用于匹配 parentNode 的后代元素。

如果 selector 不是有效的 CSS 语法，则该方法将引发 SyntaxError 异常。

如果没有任何元素与 CSS 选择器匹配，则 querySelector() 将返回 null。

querySelector() 方法在 document 对象或任何 Element 对象上都可用。

除了 querySelector() 之外，您还可以使用 querySelectorAll() 方法来选择与 CSS 选择器或 CSS 选择器组匹配的所有元素

let elementList = parentNode.querySelectorAll(selector);Code language: JavaScript (javascript)

querySelectorAll() 方法返回一个与 CSS 选择器匹配的元素的静态 NodeList。如果没有元素匹配，它将返回一个空的 NodeList。

请注意，NodeList 是一个类数组对象，而不是数组对象。但是，在现代网络浏览器中，您可以使用 forEach() 方法或 for...of 循环。

要将 NodeList 转换为数组，您可以使用 Array.from() 方法，如下所示

let nodeList = document.querySelectorAll(selector);
let elements = Array.from(nodeList);Code language: JavaScript (javascript)

基本选择器

假设您有以下 HTML 文档

<!DOCTYPE html>
<html lang="en">
<head>
    <title>querySelector() Demo</title>
</head>
<body>
    <header>
        <div id="logo">
            <img src="img/logo.jpg" alt="Logo" id="logo">
        </div>
        <nav class="primary-nav">
            <ul>
                <li class="menu-item current"><a href="#home">Home</a></li>
                <li class="menu-item"><a href="#services">Services</a></li>
                <li class="menu-item"><a href="#about">About</a></li>
                <li class="menu-item"><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <h1>Welcome to the JS Dev Agency</h1>

        <div class="container">
            <section class="section-a">
                <h2>UI/UX</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem placeat, atque accusamus voluptas
                    laudantium facilis iure adipisci ab veritatis eos neque culpa id nostrum tempora tempore minima.
                    Adipisci, obcaecati repellat.</p>
                <button>Read More</button>
            </section>
            <section class="section-b">
                <h2>PWA Development</h2>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni fugiat similique illo nobis quibusdam
                    commodi aspernatur, tempora doloribus quod, consectetur deserunt, facilis natus optio. Iure
                    provident labore nihil in earum.</p>
                <button>Read More</button>
            </section>
            <section class="section-c">
                <h2>Mobile App Dev</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi eos culpa laudantium consequatur ea!
                    Quibusdam, iure obcaecati. Adipisci deserunt, alias repellat eligendi odit labore! Fugit iste sit
                    laborum debitis eos?</p>
                <button>Read More</button>
            </section>
        </div>
    </main>
    <script src="js/main.js"></script>
</body>
</html>Code language: HTML, XML (xml)

1) 通用选择器

通用选择器用 * 表示，匹配任何类型的元素

以下示例使用 querySelector() 选择文档中的第一个元素

let element = document.querySelector('*');Code language: JavaScript (javascript)

这将选择文档中的所有元素

let elements = document.querySelectorAll('*');Code language: JavaScript (javascript)

2) 类型选择器

要按节点名称选择元素，您可以使用类型选择器，例如 a 将选择所有 <a> 元素

elementName

以下示例查找文档中的第一个 h1 元素

let firstHeading = document.querySelector('h1');Code language: JavaScript (javascript)

以下示例查找所有 h2 元素

let heading2 = document.querySelectorAll('h2');Code language: JavaScript (javascript)

3) 类选择器

要查找具有给定 CSS 类的元素，您可以使用类选择器语法

.classNameCode language: CSS (css)

以下示例查找具有 menu-item 类的第一个元素

let note = document.querySelector('.menu-item');Code language: JavaScript (javascript)

以下示例查找具有 menu 类的所有元素

let notes = document.querySelectorAll('.menu-item');Code language: JavaScript (javascript)

4) ID 选择器

要根据元素的 ID 值选择元素，您可以使用 ID 选择器语法

#idCode language: CSS (css)

以下示例查找具有 ID #logo 的第一个元素

let logo = document.querySelector('#logo');Code language: JavaScript (javascript)

由于 id 在文档中应该是唯一的，因此 querySelectorAll() 不相关。

5) 属性选择器

要选择具有给定属性的所有元素，您可以使用以下属性选择器语法之一

[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*$*=value]
Code language: JSON / JSON with Comments (json)

以下示例查找具有 [autoplay] 属性（具有任何值）的第一个元素

let autoplay = document.querySelector('[autoplay]');Code language: JavaScript (javascript)

以下示例查找具有 [autoplay] 属性（具有任何值）的所有元素

let autoplays = document.querySelectorAll('[autoplay]');Code language: JavaScript (javascript)

组合选择器

要组合多个选择器，您可以使用以下语法

selector, selector, ...

选择器列表将匹配组中任何一个选择器匹配的任何元素。

以下示例查找所有 <div> 和 <p> 元素

let elements = document.querySelectorAll('div, p');Code language: JavaScript (javascript)

组合器

1) 后代组合器

要查找节点的后代，您可以使用空格 ( ) 后代组合器语法

selector selector

例如 p a 将匹配 p 元素内部的所有 <a> 元素

let links = document.querySelector('p a');Code language: JavaScript (javascript)

2) 子级组合器

> 子级组合器查找作为第一个元素的直接子级的元素

selector > selector

以下示例查找直接位于 <ul> 元素内部的所有 li 元素

let listItems = document.querySelectorAll('ul > li');Code language: JavaScript (javascript)

要选择直接位于具有 nav 类的 <ul> 元素内部的所有 li 元素

let listItems = document.querySelectorAll('ul.nav > li');Code language: JavaScript (javascript)

3) 通用兄弟组合器

~ 组合器选择共享相同父级的兄弟节点

selector ~ selector

例如 p ~ a 将匹配所有紧跟 p 元素之后的 <a> 元素（无论是否直接紧跟）。

let links = document.querySelectorAll('p ~ a');Code language: JavaScript (javascript)

4) 相邻兄弟组合器

+ 相邻兄弟组合器选择相邻兄弟节点

selector + selector

例如 h1 + a 匹配紧接在 h1 之后的元素

let links = document.querySelectorAll('h1 + a');Code language: JavaScript (javascript)

选择紧接在 h1 之后的第一个 <a>

let links = document.querySelector('h1 + a');Code language: JavaScript (javascript)

伪类

1) 伪类

: 伪类根据元素的状态匹配元素

element:stateCode language: CSS (css)

例如 li:nth-child(2) 选择列表中的第二个 <li> 元素

let listItem = document.querySelectorAll('li:nth-child(2)');Code language: JavaScript (javascript)

2) 伪元素

:: 表示未包含在文档中的实体，因此 querySelector() 方法无法选择伪元素。

总结

querySelector() 查找与 CSS 选择器或 CSS 选择器组匹配的第一个元素。
querySelectorAll() 查找与 CSS 选择器或 CSS 选择器组匹配的所有元素。
CSS 选择器定义了 CSS 规则适用的元素。

测验

本教程对您有帮助吗？