2

JavaScript querySelector 选择元素

 6 months ago
source link: https://www.myfreax.com/javascript-queryselector/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
dom

JavaScript querySelector 选择元素

您将学习如何使用 JavaScript querySelector 以及 querySelectorAll 如何基于 CSS 选择器查找元素

Updated At 1 Nov 2023 6 min read
By myfreax
JavaScript querySelector 选择元素

JavaScript querySelector 选择元素

在本教程中，您将学习如何使用 JavaScript  querySelector 以及 querySelectorAll 如何基于 CSS 选择器查找元素。

JavaScript querySelector 和 querySelectorAll 方法简介

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

下面是 querySelector 方法的语法：

let element = parentNode.querySelector(selector);

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

如果 selector 的 CSS 语法无效，该方法将抛出  SyntaxError 语法错误异常 。如果没有元素与 CSS 选择器匹配，则 querySelector 方法返回 null。

querySelector 方法可用于 document 对象或任何Element 对象。

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

let elementList = parentNode.querySelectorAll(selector);

querySelectorAll 方法返回与 CSS 选择器匹配的元素 NodeList。如果没有元素匹配，则返回空的 NodeList。

请注意，NodeList 是一个类似数组的对象，而不是数组对象。但是，在现代 Web 浏览器，您可以使用 forEach 方法或 for...of 进行遍历。

要将 NodeList 转换为数组，可以使用 Array.from() 方法：

let nodeList = document.querySelectorAll(selector); 
let elements = Array.from(nodeList);

假设您有如下 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>

通用选择器

通用选择器使用 * 匹配所有元素，以下示例使用 querySelector() 方法选择 HTML 文档中的第一个元素：

let element = document.querySelector('*');

在 querySelectorAll 方法使用通用选择器  *  将会选择文档中的所有元素：

let elements = document.querySelectorAll('*');

类型选择器

要按元素名称(标签名)名称选择元素，请使用类型选择器，例如 a 选择所有 <a> 元素：

下面的示例查找 HTML 文档中的第一个 h1 元素：

let firstHeading = document.querySelector('h1');

以下示例查找所有 h2 元素：

let heading2 = document.querySelectorAll('h2');

类名选择器

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

.className

以下示例查找类名是 menu-item 的第一个元素：

let note = document.querySelector('.menu-item');

以下示例查找类名是 menu 的所有元素：

let notes = document.querySelectorAll('.menu-item');

ID 选择器

要根据 id 的值选择元素，请使用 id 选择器语法：

#id

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

let logo = document.querySelector('#logo');

由于 id 在文档中是唯一的，因此不需要使用 querySelectorAll 方法。

属性选择器

要选择具有指定属性的所有元素，请使用下面属性选择器语法之一：

[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*$*=value]

以下示例查找任意属性值是 [autoplay] 的第一个元素：

let autoplay = document.querySelector('[autoplay]');

以下示例查找任意属性值是 [autoplay] 的所有元素：

let autoplays = document.querySelectorAll('[autoplay]');

分组选择器

要将多个选择器分组。请使用以下语法：

selector, selector, ...

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

let elements = document.querySelectorAll('div, p');

组合选择器

后代选择器

要查找节点的后代，可以使用空格分隔的后代组合器语法：

selector selector

例如 p a 将匹配元素 p 内的所有 a 元素：

let links = document.querySelector('p a');

子组合器 > 被放在两个 CSS 选择器之间。它只匹配那些被第二个选择器匹配的元素，这些元素是被第一个选择器匹配的元素的直接子元素：

selector > selector

以下示例选择位于 <ul> 元素内部的所有 li 元素：

let listItems = document.querySelectorAll('ul > li');

要选择位于 <ul> 且类名是 nav 内部的所有 li 元素：

let listItems = document.querySelectorAll('ul.nav > li');

后续兄弟选择器

后续兄弟选择器 ~ 将两个选择器分开，并匹配第二个选择器的所有元素，位置无须紧邻于第一个元素，只须有相同的父级元素。

selector ~ selector

例如，p ~ a 匹配 p 元素后面的所有 a 元素：

let links = document.querySelectorAll('p ~ a');

接续兄弟组合器

接续兄弟选择器 + 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

selector + selector

例如，h1 + a 匹配 h1 紧邻的所有 a 元素：

let links = document.querySelectorAll('h1 + a');

下面的示例选择第一个 h1 紧跟在后面的 a 元素：

let links = document.querySelector('h1 + a');

伪类选择器

伪 :  基于其状态匹配元素：

element:state

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

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

:: 代表未包含在 HTML 文档的实体。例如， p::first-line 匹配所有 p 元素的第一行。

let links = document.querySelector('p::first-line');

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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK