Когда вы работаете с DOM (Document Object Model) в JavaScript, вам нужно часто находить элементы на странице. Для этого вы можете использовать несколько методов, среди которых наиболее популярные — это document.querySelector() и document.getElementById(). Давайте разберем их подробнее.

document.getElementById()

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

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример getElementById</title>
</head>
<body>
    <div id="myElement">Привет, мир!</div>
    <script>
        const element = document.getElementById('myElement');
        console.log(element.textContent); // Выведет: Привет, мир!
    </script>
</body>
</html>

В этом примере мы используем document.getElementById('myElement'), чтобы получить элемент с id myElement и вывести его текстовое содержимое.

document.querySelector()

Метод document.querySelector() более универсальный. Он позволяет находить первый элемент, который соответствует указанному селектору CSS. Это может быть id, класс, тег или любой другой селектор. Если селектор не находит ни одного соответствующего элемента, он также вернет null.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример querySelector</title>
</head>
<body>
    <div class="myClass">Привет, мир!</div>
    <script>
        const element = document.querySelector('.myClass');
        console.log(element.textContent); // Выведет: Привет, мир!
    </script>
</body>
</html>

В этом примере мы используем document.querySelector('.myClass'), чтобы получить первый элемент с классом myClass и вывести его текст.

Ключевые различия

Селекторы:

getElementById() требует id элемента, который должен быть уникальным.
querySelector() принимает любой валидный селектор CSS.

Возвращаемые значения:

Оба метода возвращают элемент или null, если элемент не найден.
getElementById() возвращает только один элемент, в то время как querySelector() возвращает первый найденный элемент по указанному селектору.

Производительность:

getElementById() является более быстрым, так как js-движки оптимизированы для поиска по идентификатору.
querySelector() медленнее, но стоит учитывать, что разница в производительности может быть не заметна при небольшом количестве элементов.

Заключение

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

Предыдущий вопрос

Объясните различия в использовании `foo` между `function foo() {}` и `var foo = function() {}` в JavaScript

Следующий вопрос

Когда бы вы использовали document.write()?

Содержание:

document.getElementById()

document.querySelector()

Ключевые различия

Заключение

Редактировать