Как использовать getElementById в JavaScript

getElementById - это метод объекта Document, который используется для получения элемента на странице по его идентификатору (ID).

Синтаксис метода getElementById:

document.getElementById(id);

где "id" - это идентификатор элемента, который вы хотите получить.

Пример #1: Получение текстового содержимого элемента

HTML-код:

Это пример текста

JavaScript-код:

var myDiv = document.getElementById("myDiv");
alert(myDiv.innerHTML); // Output: Это пример текста

В приведенном выше примере мы получаем элемент с ID "myDiv" и выводим его текстовое содержимое с помощью свойства innerHTML.

Пример #2: Изменение стиля элемента

HTML-код:

Это пример текста

JavaScript-код:

var myDiv = document.getElementById("myDiv");
myDiv.style.color = "red";

В этом примере мы получаем элемент с ID "myDiv" и изменяем его цвет текста на красный с помощью свойства style.color.

Пример #3: Добавление обработчика событий к элементу

HTML-код:

Нажми меня

JavaScript-код:

var myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
  alert("Кнопка нажата");
});

В этом примере мы получаем элемент с ID "myButton" и добавляем обработчик события click к этому элементу. Когда пользователь щелкает на кнопке, появляется сообщение с текстом "Кнопка нажата".

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