Современные методы DOM-навигации в JavaScript

Для манипуляции HTML-элементами в JavaScript предпочтительно использовать методы querySelector() и querySelectorAll(). Они принимают CSS-селекторы, что упрощает работу для фронтенд-разработчиков. Метод querySelector() возвращает первый подходящий элемент или null, в то время как querySelectorAll() возвращает NodeList со всеми подходящими элементами или пустой NodeList, если совпадений нет.
Современные методы DOM-навигации в JavaScript
Изображение носит иллюстративный характер

Помимо поиска элементов, класс Element имеет полезный метод matches(), который проверяет соответствие элемента заданному селектору. Для поиска родительских элементов существует метод closest(), который также принимает селектор и возвращает ближайший родительский элемент, соответствующий этому селектору.

Старые методы поиска элементов, такие как getElementById(), getElementsByTagName(), getElementsByName(), и getElementsByClassName(), могут создавать путаницу из-за их различий в поведении. Они возвращают NodeList или HTMLCollection (кроме getElementById(), который возвращает элемент), которые могут быть активными, меняя свою длину при изменении DOM. Эти методы лучше избегать, чтобы упростить код.

Перемещение по DOM относительно элемента можно выполнить через свойства, такие как parentNode, children, firstElementChild, lastElementChild, nextElementSibling и previousElementSibling. Эти свойства игнорируют текстовые узлы и комментарии, что позволяет сосредоточиться на HTML-структуре. Свойство childElementCount позволяет узнать количество дочерних элементов.


Новое на сайте

19521Банковский троян VENON на Rust атакует Бразилию с помощью девяти техник обхода защиты 19520Бонобо агрессивны не меньше шимпанзе, но всё решают самки 19519Почему 600-килограммовый зонд NASA падает на землю из-за солнечной активности? 19518«Липовый календарь»: как расписание превращает работников в расходный материал 19517Вредоносные Rust-пакеты и ИИ-бот крадут секреты разработчиков через CI/CD-пайплайны 19516Как хакеры за 72 часа превратили npm-пакет в ключ от целого облака AWS 19515Как WebDAV-диск и поддельная капча помогают обойти антивирус? 19514Могут ли простые числа скрываться внутри чёрных дыр? 19513Метеорит пробил крышу дома в Германии — откуда взялся огненный шар над Европой? 19512Уязвимости LeakyLooker в Google Looker Studio открывали доступ к чужим базам данных 19511Почему тысячи серверов оказываются открытой дверью для хакеров, хотя могли бы ею не быть? 19510Как исследователи за четыре минуты заставили ИИ-браузер Perplexity Comet попасться на... 19509Может ли женщина без влагалища и шейки матки зачать ребёнка естественным путём? 19508Зачем учёные из Вены создали QR-код, который невозможно увидеть без электронного... 19507Девять уязвимостей CrackArmor позволяют получить root-доступ через модуль безопасности...
Ссылка