Поиск элементов на странице в JavaScript

Чтобы JavaScript мог прочитать или изменить конкретный элемент, сначала нужно получить на него ссылку. Поиск находит элемент, который браузер уже создал в DOM.

• Зачем искать элементы
• querySelector()
• CSS-селекторы для поиска
• querySelectorAll()
• Если элемент не найден
• Итого

Зачем искать элементы

Для поиска используют объект document и CSS-селектор - такой же, как в стилях.

Рассмотрим разметку:

<section class="profile">
  <h2 id="profile-title">Профиль</h2>
  <button class="button">Сохранить</button>
  <button class="button">Отмена</button>
</section>

querySelector()

Метод document.querySelector() находит первый в порядке DOM элемент, который подходит под переданный селектор.

const title = document.querySelector('#profile-title');

console.log(title);

В переменную title попадёт заголовок h2. Если на странице несколько подходящих элементов, метод вернёт только первый.

CSS-селекторы для поиска

Для поиска можно использовать обычные CSS-селекторы:

document.querySelector('#profile-title'); // по id
document.querySelector('.button'); // по классу
document.querySelector('button'); // по тегу
document.querySelector('.profile .button'); // элемент внутри другого элемента

Чем точнее селектор, тем понятнее, какой элемент должен найти код. Например, .button найдёт первую кнопку на всей странице, а .profile .button - первую кнопку, которая находится внутри элемента с классом profile.

querySelectorAll()

Метод document.querySelectorAll() находит все элементы, которые подходят под селектор, и возвращает коллекцию NodeList.

const buttons = document.querySelectorAll('.button');

buttons.forEach((button) => {
  console.log(button);
});

В примере в buttons попадут обе кнопки. Метод forEach() переберёт найденные элементы по очереди.

NodeList - это статический снимок результата поиска. Если позже на страницу добавятся новые кнопки, в переменной buttons они сами не появятся. Для нового набора элементов вызовите querySelectorAll() ещё раз.

Если элемент не найден

Если querySelector() ничего не найдёт, он вернёт null. Это может произойти, если такого элемента нет на странице или скрипт выполнился раньше, чем браузер создал нужный элемент.

const notification = document.querySelector('.notification');

if (notification) {
  console.log(notification);
}

Перед работой с необязательным элементом проверяйте результат поиска. У querySelectorAll() в такой ситуации будет пустая коллекция, а не null.

Некорректный CSS-селектор не возвращает null, а вызывает ошибку SyntaxError. Значение null означает, что корректный селектор не нашёл элемент.

Поиск выполняется только среди элементов, которые уже есть в DOM. Для внешнего скрипта удобно использовать атрибут defer.

<script src="app.js" defer></script>

Такой скрипт выполнится после разбора HTML. Другой вариант - подключить обычный скрипт после разметки в конце body.

Итого

querySelector() находит первый подходящий элемент, а querySelectorAll() - все. Оба метода принимают CSS-селектор.