JavaScript querySelector 选择元素

时间：06-10来源：作者：点击数：47

在本教程中，您将学习如何使用 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 选择器。

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:JavaScript append 添加元素到父节点下一篇:JavaScript before 指定元素之前插入元素与标签

高考生入学注意：这些大	【健康】纯净水、天然
14种竞赛生升学路径盘	excel后缀xls和xlsx有

首页

学习

工作

生活

兴趣组

电子

计算机

掌上机件

图库

游戏

考试与竞赛

黑板报

国学

外语

下载

故事汇

社区

课程