Весной стартует сезон найма, успей отхватить свой оффер!

Что такое DOM?

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

Основные особенности DOM

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

  2. Динамическое обновление:
    DOM позволяет изменять содержимое и структуру документа без перезагрузки страницы.

  3. Интерфейс для JavaScript:
    С помощью DOM API можно изменять элементы страницы, их стили, добавлять или удалять элементы.

Пример DOM-дерева

HTML:

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

Работа с DOM

Вот пример, как можно использовать DOM API для изменения содержимого страницы.

HTML:

<h1 id="title">Добро пожаловать</h1>
<button id="changeText">Изменить текст</button>

JavaScript:

// Получаем элемент заголовка и кнопку
const title = document.getElementById("title");
const button = document.getElementById("changeText");

// Добавляем обработчик клика
button.addEventListener("click", () => {
  title.textContent = "Текст изменён!";
});

Основные методы работы с DOM

  • document.getElementById(id) — получить элемент по ID.
  • document.querySelector(selector) — получить первый элемент, соответствующий CSS-селектору.
  • document.querySelectorAll(selector) — получить все элементы, соответствующие CSS-селектору.
  • element.textContent — изменить текст элемента.
  • element.innerHTML — изменить HTML-содержимое элемента.
  • element.style — изменить стили элемента.

Совет:

DOM API — мощный инструмент, но для сложных задач используйте современные библиотеки, такие как React, чтобы упростить работу с интерфейсом.