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

Стрелочка влевоElement в JavaScript

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний