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-методов и свойств является обязательным для разработки современных веб-приложений.