DOM в JavaScript
НАВИГАЦИЯ ПО СТРАНИЦЕ
легко понять и запомнить
Что такое 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 и позволяет создавать интерактивные и динамические веб-страницы.
Полезные ссылки:
