логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool

DOM в JavaScript

Автор

Дмитрий Фандорин

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

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

Форма записи

Свойства

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

  • title - свойство, которое позволяет получить или изменить заголовок документа.
document.title = "Новый заголовок";
  • forms - свойство, которое возвращает коллекцию всех форм в документе.
const forms = document.forms;
  • body - свойство, которое возвращает тело документа.
const body = document.body;
  • head - свойство, которое возвращает головную часть документа.
const head = document.head;

Методы

DOM также предоставляет множество методов для работы с элементами.

  • getElementById - метод, который возвращает элемент с указанным атрибутом id.
const element = document.getElementById("myId");
  • getElementsByClassName - метод, который возвращает коллекцию элементов, у которых есть указанный класс.
const elements = document.getElementsByClassName("myClass");
  • getElementsByTagName - метод, который возвращает коллекцию элементов с указанным тегом.
const elements = document.getElementsByTagName("p");
  • querySelector - метод, который возвращает первый элемент, соответствующий заданному CSS-селектору.
const element = document.querySelector("#myId .myClass");
  • querySelectorAll - метод, который возвращает коллекцию элементов, соответствующих заданному CSS-селектору.
const elements = document.querySelectorAll("#myId .myClass");

Описание работы

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

<div id="container">
  <h1>Заголовок страницы</h1>
  <p>Первый абзац страницы</p>
  <p>Второй абзац страницы</p>
</div>

Чтобы получить доступ к элементам на странице, можно использовать методы getElementById, getElementByClassName, getElementsByTagName, querySelector и querySelectorAll.

const container = document.getElementById('container');
const header = container.querySelector('h1');
const paragraphs = container.querySelectorAll('p');

Заключение

DOM является важным инструментом для работы с веб-страницами в JavaScript. Он позволяет программисту манипулировать HTML-содержимым, стилями и структурой страницы для создания более интерактивного пользовательского опыта. Знание DOM-методов и свойств является обязательным для разработки современных веб-приложений.

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile