Манипулирование деревом DOM
, это альфа и омега любого фронтенд-разработчика, а это не возможно без селекторов позволяющих находить HTML
элементы. Давайте подробно разберёмся как они работают.
Основных методов селекторов в JavaScript всего 2 и оба они являются методами классов Document
и Element
:
-
querySelector()
- принимает строку с селектором в качестве аргумента и возвращает первое совпадение с ним илиnull
, если ничего не найдено. -
querySelectorAll()
- точно так-же принимает аргументом, строку с селектором и возвращает все найденные элементы, в виде массива элементовNodeList
, с которым можно работать в циклеfor
илиfor/of
. Если элементы не будут найдены вернёт пустой массивNodeList
.Именно этим двум методам стоит отдавать предпочтение в своём коде, хотя есть и другие альтернативы. Селекторы используемые в методах, взяты прямиком из
CSS
, следовательно фронтендерам они будут уже знакомы, а это нехилый плюс. Ниже будут примеры кода, для которых был набросан простенькаяHTMLка
:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Селекторы</title>
</head>
<body>
<a id="link_1" href="section.html">Ссылка на раздел</a>
<div id="elem_1"></div>
<div id="elem_2" name="div_2"></div>
<div id="elem_3" class="link_wrap">
<a id="link_2" href="some-page.html">Обычная ссылка</a>
<a id="link_3" href="some-page.html">Новости</a>
</div>
<div id="elem_4"></div>
<script src="script/script.js"></script>
</body>
</html>
Посмотрим на разницу работы методов с одинаковыми селекторами:
const one = document.querySelector('div'), // Содержит ссылку на <div id="elem_1">
all = document.querySelectorAll('div') // Содержит NodeList со всеми 4-мя дивами что есть в нашем документе
Для поиска можно использовать сразу несколько селекторов отделяя друг от друга их запятыми:
const one = document.querySelector('#elem_2, a'), // Содержит элемент ссылки <a id="link_1">, так как элемент по этому селектору встречается раньше
all = document.querySelectorAll('a, #elem_2') // Содержит NodeList с 2 элементами: 2 ссылки </a><a> и </a><div id="elem_2"><a>
Тогда методы вернут элементы которые подходят хотя-бы под один из указанных селекторов. Благодаря CSS
селекторам можно найти элементы по:
-
ID;
-
Классу;
-
Атрибутам;
-
Позиции.
Как упоминалось выше, методы селекторы имеются у двух классов Document
и Element
и их работа отличается тем что в случае с классом Element
, выбираться будут только потомки элемента у которого был вызван метод:
const someDiv = document.querySelector('[id="elem_3"]'),
searchInElem = someDiv.querySelector('a'), // Содержит </a><a id="link_2">
searchInDocument = document.querySelector('a') // // Содержит </a><a id="link_1">
CSS
селекторы по псевдолементам:
-
::first-line
; -
::first-letter
. не будут работать сquerySelector()
иquerySelectorAll()
, так как предназначены для работы с текстовыми узлами, а не сHTML
элементами. Некоторые браузеры не реализуют работу с псевдоклассамиCSS
: -
:link
; -
:visited
.
Делается это из соображений безопасности, так как через них можно следить за хронологий посещений пользователя.
Полезным в работе может оказаться метод matches()
, класса Element
, который принимает селектор в качестве аргумента и проверяет соответствует ли элемент данному селектору, если да, то возвращает true
.
const someDiv = document.querySelector('#elem_3')
let isDiv = someDiv.matches('div'), // true
isLink = someDiv.matches('a') // false
Поиск родительских элементов по селектору
Если метод querySelector()
класса Element
ищет элементы в направлении сверху вниз и работает только с дочерними элементами, то метод closets()
позволяет проделать ту-же операцию в обратном направлении и предназначен для работы уже предками элемента. Он точно так-же принимает селектор в качестве единственного аргумента и возвращает найденного родителя, а если по указанному селектору ничего найти не удастся то вернёт null
.
const someLink = document.querySelector('#link_2'),
linkParentDiv = someLink.closest('div') // <div id="elem_3">
Устаревшие методы селекторы
Есть ряд методов класса Document
, использование которых не запрещено, но все-же лучше вместо них применять querySelector()
или querySelectorAll()
, чтобы не усложнять код:
-
getElementById()
- находит элемент поID
; -
getElementsByTagName()
- находит элемент по имени тэга; -
getElementsByName()
- находит элемент по атрибутуname
; -
getElementsByClassName()
- находит элемент по имени класса.Два метода из данного списка:
-
getElementsByTagName()
; -
getElementsByClassName()
.
Реализованы так-же и в классе Element
и позволяют искать его потомков. Все они за исключением getElementById()
возвращают NodeList
. getElementById()
возвращает объект Element
.
NodeList
возвращаемый устаревшими методами, является активным, то есть изменяет свою длину при появлении/удалении новых элементов, соответствующих указанному селектору .
const elemById = document.getElementById('elem_1'), // <div id="elem_1">
tags = document.getElementsByTagName('a'), // HTMLCollection со всеми ссылкам
elemByName = document.getElementsByName('div_2'), // NodeList с <div id="elem_2">
elemByClass = document.getElementsByClassName('link_wrap') // HTMLCollection с <div id="elem_3">
Доступ к элементам через свойства
В классе Document
реализован ряд свойств для быстрого доступа к элементам HTML
:
-
images
- все картинки; -
forms
- все формы; -
links
- все ссылки с атрибутомhref
; -
all
- содержит всеHTML
элементы, документа. Наиболее устаревшее из всех свойств и его не рекомендуется использовать. Все они ссылаются на объектHTMLCollection
, который похож наNodeList
, но в качестве индекса может быть использованID
элемента или его имя (атрибутname
):
document.links.link_1 // <a id="link_1">
Все данные свойства являются устаревшими и не рекомендованы к использованию. Опять-же querySelector()
иquerySelectorAll()
, наше всё!
Движение по документу относительно элемента
Мы можем использовать элемент как точку отсчёта и двигаться по документу относительно него в любых направлениях. Для этого в классе Element
имеются свойства:
-
parentNode
- родительский элемент; -
children
- потомков элемента; -
firstElementChild
- первый дочерний элемент. Равенnull
, если дочерние элементы отсутствуют; -
lastElementChild
- последний дочерний элемент. Равенnull
, если дочерние элементы отсутствуют; -
nextElementSibling
- ссылается на следующий (справа) соседний элемент. Равенnull
, если следующий элементы отсутствуют; -
previousElementSibling
- ссылается на предыдущий (слева) соседний элемент. Равенnull
, если предыдущий элементы отсутствуют.
Все перечисленные выше свойства, будут ссылаться только на HTML
элементам и они игнорируют текстовые узлы и комментарии в коде:
const elem = document.querySelector('#elem_3'),
parent = elem.parentNode, // <body>
children = elem.children, // HTMLCollection c двумя ссылками <a id="link_2"> и <a id="link_3">
firsChild = elem.firstElementChild, // <a id="link_2">
lastChild = elem.lastElementChild, // <a id="link_3">
prevNeighbour = elem.previousElementSibling, // <div id="elem_2">
nextNeighbour = elem.nextElementSibling // <div id="elem_4">
А вот например свойство childNodes
, будет содержать всех потомков элемента, включая комментарии и текст. На практике можно редко встретить ситуацию когда требуется взаимодействовать с тактовыми узлами, ещё реже с комментариями, так что свойства учитывающие их, в практическом коде штука весьма диковинная, но тем не менее знать о них нужно.
При работе со всеми свойствами перечисленными выше, центральной точкой отсчёта становится определённый элемент, относительно которого мы можем двигаться по документу в любом направлении.
Ещё есть одно информационное свойство childElementCount
, хранящее количество потомков.
const elem = document.querySelector('#elem_3'),
childrenCount = elem.childElementCount // 2
Выводы
Обратите внимание на разнообразие, возможных способов, через которые можно реализовать работу с HTML
элементами в JS, многие из которых дублируют друг, друга. Причём аналогичная ситуация будет всплывать из раза в раз и в других интерфейсах языка и является одной из причин хейта в его сторону. Подобная хаотичность вызвана необходимостью обратной совместимости с фичами из разных вех развития JavaScript и его не простой историей успеха.
Я же в данном материале постарался описать всё практически всё что есть, указав какие фичи можно использовать, а какие допустимы только под угрозой применения к вам насилия. Код в котором встречаются только 2 одобренных метода, будет легко читаться всеми гребцами на галере, а вот использование всего зоопарка принуждает других разработчиков (да и вас самого пару месяцев спустя), либо держать в голове кучу не особо нужных нюансов, либо идти в гугл или ChatGPT за разъяснениями, что порой раздражает. Плохой разработчик пишет код для себя, хороший для других, помните это :-)
Автор: JastaFly