DOM в JavaScript

НАВИГАЦИЯ ПО СТРАНИЦЕ

Что такое DOM Структура DOM Как взаимодействовать с DOM
ПОЛНЫЙ ОТВЕТ
БЕЗ ВОДЫ
Без воды — краткий вариант ответа,
легко понять и запомнить

Что такое DOM

DOM (Document Object Model) представляет собой иерархическое дерево, которое создается браузером при загрузке веб-страницы. Каждый элемент на веб-странице, такой как заголовки, параграфы, изображения и другие, представлены как объекты в этой модели. Эти объекты можно изменять с помощью JavaScript, что позволяет динамически изменять содержимое и структуру страницы.

Структура DOM

DOM начинается с объекта document, который представляет всю веб-страницу. Он имеет древовидную структуру, где каждый элемент страницы является узлом в этом дереве. Узлы могут быть элементами HTML, атрибутами, текстом и т. д. Каждый узел связан с другими узлами в соответствии с их иерархией.

Пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Пример DOM</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    <p>Это пример DOM.</p>
  </body>
</html>

В этом примере document — корневой объект, а h1 и p — дочерние элементы, связанные с body.

Как взаимодействовать с DOM

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

Пример:

// Найти элемент по его id
const header = document.getElementById('header');

// Изменить текст в заголовке
header.textContent = 'Привет, новый текст!';

DOM является фундаментальной частью веб-разработки с использованием JavaScript и позволяет создавать интерактивные и динамические веб-страницы.

Skyeng

Полезные ссылки:

zaka-zaka

Покупай игры выгодно

РЕКЛАМА, ООО «ГЕЙБСТОР» ИНН: 7842136365

zaochnik

Срочная помощь в написании всех видов работ

РЕКЛАМА, ООО «ЗАОЧНИК.КОМ.» ИНН: 7710949967

skyeng

Лучшие из курсов английского в Skyeng

РЕКЛАМА, ОАНО ДПО «СКАЕНГ» ИНН: 9709022748