Element – JavaScript Document Object Model – Объектная модель документа

Главная

База знаний

javascript

Элемент на странице в JavaScript

Элемент в JavaScript

29 апреля 2025

Автор

Дмитрий Нечаев

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

Получение элемента по идентификатору

Для начала давайте посмотрим, как можно получить доступ к HTML-элементам из JavaScript. Самый распространенный способ - использование идентификаторов элементов. Для этого мы используем метод getElementById объекта document.

// Получаем элемент по его идентификатору
const myElement = document.getElementById('myElementId');

Здесь myElementId - это атрибут id элемента в HTML.

Работа с HTML-содержимым элемента

Когда мы получаем элемент в JavaScript, мы можем получить доступ к его содержимому, атрибутам и другим свойствам. Давайте посмотрим, как это работает на примере изменения текстового содержимого элемента.

<!-- HTML -->
<div id="myDiv">Пример текста</div>

// JavaScript
const myDiv = document.getElementById('myDiv');
// Изменяем текстовое содержимое элемента
myDiv.textContent = 'Новый текст';

В результате выполнения этого кода текст внутри элемента <div> изменится на "Новый текст".

Создание новых элементов

JavaScript также позволяет создавать новые HTML-элементы и добавлять их на страницу. Для этого мы используем метод createElement объекта document.

// Создаем новый элемент <p>
const newParagraph = document.createElement('p');
// Устанавливаем текстовое содержимое
newParagraph.textContent = 'Новый абзац';
// Добавляем элемент в конец <body>
document.body.appendChild(newParagraph);

Теперь на странице будет добавлен новый абзац с текстом "Новый абзац".

Обработка событий

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

<!-- HTML -->
<button id="myButton">Нажми меня</button>

// JavaScript
const myButton = document.getElementById('myButton');
// Назначаем обработчик события при клике на кнопку
myButton.addEventListener('click', () => {
  alert('Кнопка была нажата!');
});

Теперь при клике на кнопку появится всплывающее окно с сообщением "Кнопка была нажата!".

Итоги

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