► Зачем необходим DOM? | 🔁 Новости из телеграм

Зачем необходим DOM?

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

Зачем он нужен

Доступ к элементам страницы: Позволяет программно получать доступ к элементам HTML-документа (теги, текст, атрибуты) и манипулировать ими.
Изменение содержимого: С помощью него можно изменять содержимое страницы динамически, например, обновлять текст, менять изображения, добавлять или удалять элементы.
Обработка событий: Позволяет обрабатывать события, такие как клики, нажатия клавиш, прокрутка и другие взаимодействия пользователя с веб-страницей.
Динамическое изменение структуры страницы: Предоставляет методы для добавления, удаления и изменения элементов и атрибутов, что позволяет динамически изменять структуру страницы.
Интерактивность: С помощью него можно создавать интерактивные веб-приложения, которые реагируют на действия пользователя без перезагрузки страницы.

Как он работает

Представляет собой древовидную структуру, где каждый элемент страницы является узлом дерева. Вершиной дерева является объект document, который представляет весь HTML-документ. Узлы могут быть элементами (<div>, <p>, <a> и т.д.), текстом, комментариями и другими типами.

Пример HTML-документа:

<!DOCTYPE html> <html> <head> <title>Document Object Model</title> </head> <body> <h1>Hello, world!</h1> <p>This is a paragraph.</p> </body> </html>

Структура для этого документа:

document

└── html

 ├── head

 │   └── title

 │       └── "Document Object Model"

 └── body

     ├── h1

     │   └── "Hello, world!"

     └── p

         └── "This is a paragraph."

Основные методы и свойства

Доступ к элементам:

✅document.getElementById(id): Возвращает элемент по его id.

✅document.getElementsByClassName(className): Возвращает все элементы с указанным классом.

✅document.getElementsByTagName(tagName): Возвращает все элементы с указанным тегом.

✅document.querySelector(selector): Возвращает первый элемент, соответствующий CSS селектору.

✅document.querySelectorAll(selector): Возвращает все элементы, соответствующие CSS селектору.

Создание и удаление элементов:

✅document.createElement(tagName): Создает новый элемент.

✅parentElement.appendChild(childElement): Добавляет элемент в конец дочерних элементов родителя.

✅parentElement.removeChild(childElement): Удаляет элемент из дочерних элементов родителя.

Изменение содержимого и атрибутов:

✅element.innerHTML: Изменяет или получает HTML-содержимое элемента.

✅element.textContent: Изменяет или получает текстовое содержимое элемента.

✅element.setAttribute(name, value): Устанавливает значение атрибута элемента.

✅element.getAttribute(name): Получает значение атрибута элемента.

Пример:

// Изменение текста заголовка

const header = document.querySelector('h1');

header.textContent = 'Hello, DOM!';

// Добавление нового параграфа

const newParagraph = document.createElement('p');

newParagraph.textContent = 'This is a new paragraph.';

document.body.appendChild(newParagraph);

// Изменение атрибута

const link = document.querySelector('a');

link.setAttribute('href', 'https://www.example.com');

👉 @seniorFront