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 选择器。
湘公网安备 43102202000103号