Выбор элементов DOM в JavaScript

Понимание того, как выбирать элементы DOM в JavaScript, критически важно для любого веб-разработчика. Это подробное руководство охватывает все необходимые методы и приёмы для эффективного выбора элементов DOM, что делает ваши веб-приложения динамичными и интерактивными.

Введение в выбор элементов DOM

Модель документа (DOM) — это программный интерфейс для веб-документов. Она представляет собой страницу таким образом, что программы могут изменять её структуру, стили и содержимое. Эффективный выбор элементов DOM — это первый шаг в манипулировании веб-страницами с помощью JavaScript.

Использование getElementById

Один из самых простых и часто используемых методов — выбор одного элемента по его идентификатору.

---

const element = document.getElementById('example');
element.textContent = "You clicked the button!";

Try it Yourself »

В этом примере мы используем getElementById для выбора элемента с идентификатором example и обновления его текстового содержимого.

Использование getElementsByClassName

Этот метод возвращает живую коллекцию HTMLCollection элементов с указанным именем класса. Он необходим для работы с несколькими элементами одновременно.

---

const elements = document.getElementsByClassName('example');
Array.from(elements).forEach((element, index) => {
    element.textContent = `Element ${index + 1} changed!`;
});

Try it Yourself »

Здесь getElementsByClassName выбирает все элементы с классом example. Затем код проходит по коллекции, чтобы обновить текстовое содержимое каждого элемента.

INFO

Всегда преобразовывайте HTMLCollection в массив с помощью Array.from(), чтобы использовать методы массивов, такие как forEach(). Обратите внимание, что этот метод возвращает живую коллекцию, которая автоматически обновляется при изменении DOM.

Использование getElementsByTagName

Выбирает все элементы с указанным именем тега, возвращая живую коллекцию HTMLCollection.

---

const paragraphs = document.getElementsByTagName('p');
for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.backgroundColor = 'yellow';
}

Try it Yourself »

В этом примере getElementsByTagName выбирает все элементы p. Затем цикл подсвечивает каждый абзац, изменяя его фоновый цвет на жёлтый.

Использование querySelector

Метод querySelector возвращает первый элемент, соответствующий указанному CSS-селектору.

---

const element = document.querySelector('.example');
element.style.backgroundColor = 'lightblue';

Try it Yourself »

Здесь querySelector выбирает первый элемент с классом example, и его фоновый цвет изменяется на светло-голубой.

INFO

Используйте querySelector для выбора первого подходящего элемента и querySelectorAll для выбора всех подходящих элементов.

Использование querySelectorAll

Этот метод возвращает статический NodeList элементов, соответствующих указанному CSS-селектору.

---

const elements = document.querySelectorAll('.example');
elements.forEach((element, index) => {
    element.style.backgroundColor = 'lightgreen';
    element.textContent = `Element ${index + 1} highlighted!`;
});

Try it Yourself »

В этом примере querySelectorAll выбирает все элементы с классом example. Затем код обновляет фоновый цвет и текстовое содержимое каждого выбранного элемента.

INFO

querySelectorAll возвращает статический NodeList, который не обновляется автоматически при изменении DOM. Это контрастирует с getElementsByClassName и getElementsByTagName, которые возвращают живые коллекции HTMLCollection. Хотя forEach поддерживается во всех современных браузерах, в устаревших средах может потребоваться Array.from(elements).forEach(..).

Использование matches

Метод matches проверяет, соответствует ли элемент заданному CSS-селектору.

---

const element = document.getElementById('test');
if (element.matches('.example')) {
    element.style.color = 'red';
    element.textContent = "Element matches the selector!";
}

Try it Yourself »

Здесь matches используется для проверки, имеет ли элемент с идентификатором test класс example. Если да, то обновляются текстовое содержимое и цвет.

Использование closest

Метод closest проходит по элементу и его предкам, чтобы найти ближайшего родителя, соответствующего указанному селектору.

---

const element = document.getElementById('child');
const parent = element.closest('.outer');
parent.style.border = '2px solid red';

Try it Yourself »

В этом примере closest находит ближайшего предка с классом outer для элемента с идентификатором child, и его граница изменяется на красную.

INFO

Используйте closest для поиска ближайшего предка, что очень полезно при делегировании событий.

Комбинирование селекторов

Селекторы можно комбинировать для более точного выбора.

---

const element = document.querySelector('.example.special');
element.style.backgroundColor = 'pink';
element.textContent = "Special element highlighted!";

Try it Yourself »

Здесь мы комбинируем селекторы для выбора элемента, имеющего одновременно классы example и special, обновляя его фоновый цвет и текстовое содержимое.

Заключение

Освоение выбора элементов DOM в JavaScript является фундаментальным навыком для любого веб-разработчика. Используя рассмотренные методы, вы сможете эффективно выбирать и манипулировать элементами для создания динамичных и интерактивных веб-приложений.

INFO

Примечание о производительности: Устаревшие методы, такие как getElementById и getElementsByClassName, высоко оптимизированы в современных браузерах. Для сложных запросов обычно предпочтительнее querySelector и querySelectorAll благодаря их гибкости и поддержке CSS-селекторов, хотя на очень больших DOM они могут работать немного медленнее. Для обеспечения производительности при переборе всегда предпочитайте статические коллекции (querySelectorAll), так как живые коллекции (getElementsBy...) вызывают перерисовку (reflow) при каждом изменении DOM. Обратите внимание, что querySelectorAll высоко оптимизирован и достаточно быстр для типичных сценариев использования.

Практика

Какие из следующих методов можно использовать для выбора элементов DOM в JavaScript?

getElementByIdquerySelectorgetElementsByClassNamegetElementsByTagNamesetAttribute