В этом руководстве вы узнаете, как использовать метод JavaScript getElementById() для поиска и выбора элемента по указанному идентификатору.
Метод document.getElementById() возвращает объект Element, который представляет элемент HTML с идентификатором, соответствующим указанной строке.
Если в документе нет элемента с указанным идентификатором, document.getElementById() возвращает null.
Поскольку идентификатор элемента уникален в документе HTML, document.getElementById() — это быстрый способ доступа к элементу.
В отличие от метода querySelector(), getElementById() доступен только для объекта document, но не для других элементов.
Ниже показан синтаксис метода getElementById() :
const element = document.getElementById(id);
В этом синтаксисе идентификатор — это строка, представляющая идентификатор элемента для выбора. Идентификатор чувствителен к регистру. Например, 'root' и 'Root'— совершенно разные.
id уникален в HTML-документе. Но если документ HTML содержит несколько элементов с одинаковым идентификатором, метод document.getElementById() возвращает первый встреченный элемент.
Пример
Предположим, у вас есть следующий HTML-документ:
<html>
<head>
<title>JavaScript getElementById() Method</title>
</head>
<body>
<p id="message">A paragraph</p>
</body>
</html>Документ содержит элемент <p> с атрибутом id со значением message :
const p = document.getElementById('message');
console.log(p);Выход:
<p id="message">A paragraph</p>
После выбора элемента вы можете добавлять к нему стили, управлять его атрибутами и переходить к родительским и дочерним элементам.
Заключение
document.getElementById()возвращает элемент DOM, указанныйidилиnull, если соответствующий элемент не найден.- Если несколько элементов имеют один и тот же
id, даже если он недействителен,getElementById()возвращает первый встреченный элемент.