В этом руководстве вы узнаете, как использовать методы JavaScript querySelector() и querySelectorAll() для поиска элементов на основе селекторов CSS.
querySelector() — это метод интерфейса Element. Метод позволяет выбрать первый элемент, соответствующий одному или нескольким селекторам 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() возвращает статический NodeList элементов, соответствующих селектору CSS. Если ни один элемент не соответствует, он возвращает пустой NodeList.
Обратите внимание, что NodeList — это объект, подобный массиву, а не объект массива. Однако в современных веб-браузерах вы можете использовать метод forEach() или цикл for…
Чтобы преобразовать 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>1) Универсальный селектор
Универсальный селектор обозначается *, который соответствует всем элементам любого типа:
*
В следующем примере используется querySelector() выбора первого элемента в документе:
let element = document.querySelector('*');Выберет все элементы в документе:
let elements = document.querySelectorAll('*');2) Выбор типа
Чтобы выбрать элементы по имени узла, вы используете селектор типа, например, a выбирает все элементы <a> :
elementName
В следующем примере выполняется поиск первого элемента h1 в документе:
let firstHeading = document.querySelector('h1');И следующий пример находит все элементы h2 :
let heading2 = document.querySelectorAll('h2');3) Селектор класса
Чтобы найти элемент с заданным классом CSS, вы используете синтаксис селектора класса:
.className
В следующем примере выполняется поиск первого элемента с классом menu-item :
let note = document.querySelector('.menu-item');И следующий пример находит все элементы с menu :
let notes = document.querySelectorAll('.menu-item');4) Выбор идентификатора
Чтобы выбрать элемент на основе значения его идентификатора, вы используете синтаксис селектора идентификатора:
#id
В следующем примере выполняется поиск первого элемента с идентификатором #logo :
let logo = document.querySelector('#logo');Поскольку id должен быть уникальным в документе, querySelectorAll() не имеет значения.
5) Селектор атрибутов
Чтобы выбрать все элементы, имеющие заданный атрибут, вы используете один из следующих синтаксисов селектора атрибута:
[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');Комбинаторы
1) Комбинатор descendant
Чтобы найти потомков узла, вы используете синтаксис комбинатора space( ):
selector selector
Например, p a будет соответствовать всем элементам <a> внутри элемента p :
let links = document.querySelector('p a');2) Детский комбинатор
Комбинатор дочерних элементов > находит все элементы, которые являются прямыми дочерними элементами первого элемента:
selector > selector
В следующем примере выполняется поиск всех элементов li, находящихся непосредственно внутри элемента <ul> :
let listItems = document.querySelectorAll('ul > li');Чтобы выбрать все элементы li, которые находятся непосредственно внутри элемента <ul> с классом nav :
let listItems = document.querySelectorAll('ul.nav > li');3) Общий родственный комбинатор
Комбинатор ~ выбирает братьев и сестер, которые имеют одного и того же родителя:
selector ~ selector
Например, p ~ a будет соответствовать всем элементам <a>, которые следуют за элементом p, сразу или нет:
let links = document.querySelectorAll('p ~ a');4) Соседний родственный комбинатор
Комбинатор смежных братьев и сестер + выбирает смежных братьев и сестер:
selector + selector
Например, h1 + a соответствует всем элементам, которые непосредственно следуют за h1 :
let links = document.querySelectorAll('h1 + a');И выберите первый <a>, который следует непосредственно за h1 :
let links = document.querySelector('h1 + a');
Псевдо
1) Псевдоклассы
: элемент на основе их состояний:
element:state
Например, li:nth-child(2) выбирает второй элемент <li> в списке:
let listItem = document.querySelectorAll('li:nth-child(2)');2) Псевдоэлементы
:: представляет объекты, которые не включены в документ.
Например, p::first-line соответствует первой строке всех элементов div :
let links = document.querySelector('p::first-line');Заключение
querySelector()находит первый элемент, соответствующий селектору CSS или группе селекторов CSS.querySelectorAll()находит все элементы, соответствующие селектору CSS или группе селекторов CSS.- Селектор CSS определяет элементы, к которым применяется правило CSS.