DOM означает объектную модель документа, представление HTML-документа в узлах и объектах. Браузеры предоставляют API, который можно использовать для взаимодействия с DOM. Вот как работают современные JavaScript-фреймворки - они используют DOM API, чтобы сообщить браузеру, что отображать на странице.
DOM - это внутреннее представление веб-страницы в браузере. Когда браузер получает ваш HTML-код с вашего сервера, парсер анализирует структуру вашего кода и создает его модель. На основе этой модели браузер затем отображает страницу на экране.
Браузеры предоставляют API, который можно использовать для взаимодействия с DOM. Вот как работают современные JavaScript-фреймворки - они используют DOM API, чтобы сообщить браузеру, что отображать на странице.
В одностраничных приложениях DOM постоянно изменяется, чтобы отражать то, что отображается на экране, и как разработчик вы можете проверить это, используяИнструменты разработчика браузера.
DOM не зависит от языка, и де-факто стандартом для доступа к DOM является использованиеJavaScript, поскольку это единственный язык, на котором могут работать браузеры.
Модель DOM стандартизирована WHATWG вDOM Living Standard Spec.
С помощью JavaScript вы можете взаимодействовать с DOM, чтобы:
- проверить структуру страницы
- доступ к метаданным и заголовкам страницы
- отредактировать стиль CSS
- прикрепить или удалить прослушиватели событий
- редактировать любой узел на странице
- изменить любой атрибут узла
.. и многое другое.
Два основных объекта, предоставляемых DOM API, с которыми вы будете больше всего взаимодействовать:document
иwindow
.
Объект Window
Вwindow
Объект представляет окно, содержащее документ DOM.
window.document
указывает наdocument
объект загружен в окно.
Свойства и методы этого объекта можно вызывать без ссылкиwindow
явно, потому что он представляет глобальный объект. Итак, предыдущее свойствоwindow.document
обычно называется простоdocument
.
Характеристики
Вот список полезных свойств, на которые вы, вероятно, будете часто ссылаться:
console
указывает на консоль отладки браузера. Полезно для печати сообщений об ошибках или ведения журнала, используяconsole.log
,console.error
и другие инструменты (см.Браузер DevToolsстатья)document
как уже было сказано, указывает наdocument
объект, ключ к взаимодействиям с DOM, которые вы будете выполнятьhistory
дает доступ кAPI историиlocation
дает доступ кИнтерфейс местоположения, из которого вы можете определить URL, протокол, хэш и другую полезную информацию.localStorage
ссылка наAPI веб-хранилищаlocalStorage объектsessionStorage
ссылка на объект sessionStorage API веб-хранилища
Методы
Вwindow
объект также предоставляет полезные методы:
alert()
: который вы можете использовать для отображения диалоговых окон предупрежденийpostMessage()
: используетсяChannel Messaging APIrequestAnimationFrame()
: используется для выполнения анимации, одновременно производительной и легкой для процессора.setInterval()
: вызывать функцию каждые n миллисекунд, пока интервал не будет очищен с помощьюclearInterval()
clearInterval()
: очищает интервал, созданный с помощьюsetInterval()
setTimeout()
: выполнить функцию через 'n' миллисекундsetImmediate()
: выполнить функцию, как только браузер будет готовaddEventListener()
: добавить в документ прослушиватель событийremoveEventListener()
: удалить прослушиватель событий из документа
См. Полный справочник всех свойств и методовwindow
объект вhttps://developer.mozilla.org/en-US/docs/Web/API/Window
Объект Document
Вdocument
объект представляет собой дерево DOM, загруженное в окно.
Вот представление части модели DOM, указывающей на теги head и body:
Вот представление части DOM, показывающей тег заголовка, содержащий тег заголовка с его значением:
Вот представление части модели DOM, показывающей тег тела, содержащий ссылку, со значением и атрибут href с его значением:
Доступ к объекту Document можно получить изwindow.document
, и с тех порwindow
это глобальный объект, вы можете использовать ярлыкdocument
объект прямо из консоли браузера или в вашем коде JavaScript.
Этот объект Document имеет массу свойств и методов. ВСелекторы APIметоды - это те, которые вы, вероятно, будете использовать чаще всего:
document.getElementById()
document.querySelector()
document.querySelectorAll()
document.getElementsByTagName()
document.getElementsByClassName()
Вы можете получить название документа, используяdocument.title
, и URL-адрес, использующийdocument.URL
. Реферер доступен вdocument.referrer
, домен вdocument.domain
.
Отdocument
объект вы можете получить тело и головуУзлы элементов:
document.documentElement
: узел документаdocument.body
: thebody
Узел элементаdocument.head
: thehead
Узел элемента
Вы также можете получить список всех узлов элементов определенного типа, напримерHTMLCollectionвсех ссылок, использующихdocument.links
, все изображения, использующиеdocument.images
, все формы, использующиеdocument.forms
.
Документпеченьедоступны вdocument.cookie
. Дата последнего изменения вdocument.lastModified
.
Вы можете сделать гораздо больше, даже получитьстарая школаи заполните свои скриптыdocument.write()
, метод, который часто использовался еще на заре JavaScript для взаимодействия со страницами.
См. Полный справочник всех свойств и методовdocument
объект вhttps://developer.mozilla.org/en-US/docs/Web/API/Document
Типы узлов
Существуют различные типы узлов, некоторые из которых вы уже видели на примерах изображений выше. Основные из них:
- Документ: узел документа, начало дерева
- Элемент: тег HTML
- Attr: атрибут тега
- Текст: текстовое содержимое элемента или узла атрибута
- Комментарий: комментарий HTML
- Тип документа: theDoctypeдекларация
Обход DOM
DOM - это дерево элементов с узлом Document в корне, который указывает наhtml
Узел элемента, который, в свою очередь, указывает на узлы его дочерних элементовhead
иbody
, и так далее.
Из каждого из этих элементов вы можете перемещаться по структуре DOM и переходить к разным узлам.
Получение родителя
Каждый элемент имееттолько одинродитель.
Чтобы получить это, вы можете использоватьNode.parentNode
или жеNode.parentElement
(где Node означает узел в DOM).
Они почти такие же, за исключением случаев, когда запускались наhtml
элемент:parentNode
возвращает родителя указанного узла в дереве DOM, аparentElement
возвращает родительский элемент узла DOM или null, если узел либо не имеет родителя, либо его родительский элемент не является элементом DOM.
Обычно люди используютparentNode
.
Получение детей
Чтобы проверить, есть ли у узла дочерние узлы, используйтеNode.hasChildNodes()
который возвращает логическое значение.
Чтобы получить доступ ко всем узлам дочерних элементов узла, используйтеNode.childNodes
.
DOM также предоставляетNode.children
метод. Однако он включает не только узлы Element, но и пустое пространство между элементами как узлы Text. Это не то, чего вы обычно хотите.
Чтобы получить первый дочерний элемент Element Node, используйтеNode.firstElementChild
. Чтобы получить последний дочерний узел элемента, используйтеNode.lastElementChild
:
DOM также предоставляетNode.firstChild
иNode.lastChild
, с той разницей, что они не «фильтруют» дерево только по узлам элемента. Они также будут отображать пустые текстовые узлы, обозначающие пробелы.
Короче говоря, для навигации по дочерним узлам элементов используйте
Node.childNodes
Node.firstElementChild
Node.lastElementChild
Получение братьев и сестер
Помимо получения родителя и потомков, поскольку DOM представляет собой дерево, вы также можете получить братьев и сестер любого узла элемента.
Вы можете сделать это, используя
Node.previousElementSibling
Node.nextElementSibling
DOM также предоставляетpreviousSibling
иnextSibling
, но, как и их аналоги, описанные выше, они включают пробелы как текстовые узлы, поэтому их обычно следует избегать.
Редактирование DOM
Модель DOM предлагает различные методы для редактирования узлов страницы и изменения дерева документа.
С
document.createElement()
: создает новый узел элементаdocument.createTextNode()
: создает новый текстовый узел
вы можете создавать новые элементы и добавлять их к элементам DOM, которые вы хотите использовать в качестве дочерних, используяdocument.appendChild()
:
const div = document.createElement('div')
div.appendChild(document.createTextNode('Hello world!'))
first.removeChild(second)
удаляет дочерний узел «второй» из узла «первый».document.insertBefore(newNode, existingNode)
вставляет «newNode» как родственный элемент «existingNode», помещая его перед ним в древовидной структуре DOM.element.appendChild(newChild)
изменяет дерево под «элементом», добавляя к нему новый дочерний узел «newChild» после всех остальных дочерних элементов.element.prepend(newChild)
изменяет дерево в разделе «element», добавляя к нему новый дочерний узел «newChild» перед другими дочерними элементами. Вы можете передать один или несколько дочерних узлов или даже строку, которая будет интерпретироваться как текстовый узел.element.replaceChild(newChild, existingChild)
изменяет дерево в разделе «element», заменяя «existingChild» новым узлом «newChild».element.insertAdjacentElement(position, newElement)
вставляет «newElement» в DOM, позиционируя его относительно «element» в зависимости от значения параметра «position».Посмотреть возможные значения.element.textContent = 'something'
изменяет содержимое узла Text на «что-то».
Скачать мою бесплатнуюРуководство для начинающих по JavaScript
Больше руководств по браузеру:
- Некоторые полезные приемы, доступные в HTML5
- Как я заставил веб-сайт на CMS работать в автономном режиме
- Полное руководство по прогрессивным веб-приложениям
- API-интерфейс Fetch
- Руководство по Push API
- API обмена сообщениями канала
- Учебник для сервис-воркеров
- Руководство по Cache API
- Руководство по API уведомлений
- Погрузитесь в IndexedDB
- API селекторов: querySelector и querySelectorAll
- Эффективно загружайте JavaScript с помощью defer и async
- Объектная модель документа (DOM)
- API веб-хранилища: локальное хранилище и хранилище сеансов
- Узнайте, как работают HTTP-файлы cookie
- API истории
- Формат изображения WebP
- XMLHttpRequest (XHR)
- Подробное руководство по SVG
- Что такое URL-адреса данных
- Дорожная карта для изучения веб-платформы
- CORS, совместное использование ресурсов между источниками
- Веб-воркеры
- Руководство по requestAnimationFrame ()
- Что такое Doctype
- Работа с консолью DevTools и консольным API
- API синтеза речи
- Как дождаться события готовности DOM в простом JavaScript
- Как добавить класс к элементу DOM
- Как перебрать элементы DOM из querySelectorAll
- Как удалить класс из элемента DOM
- Как проверить, есть ли у элемента DOM класс
- Как изменить значение узла DOM
- Как добавить событие щелчка в список элементов DOM, возвращаемых из querySelectorAll
- WebRTC, веб-API реального времени
- Как получить позицию прокрутки элемента в JavaScript
- Как заменить элемент DOM
- Как принимать только изображения в поле входного файла
- Зачем использовать предварительную версию браузера?
- Объект Blob
- Файловый объект
- Объект FileReader
- Объект FileList
- ArrayBuffer
- ArrayBufferView
- Объект URL
- Типизированные массивы
- Объект DataView
- API BroadcastChannel
- API Streams
- Объект FormData
- Объект навигатора
- Как использовать API геолокации
- Как использовать getUserMedia ()
- Как использовать API перетаскивания
- Как работать с прокруткой на веб-страницах
- Обработка форм в JavaScript
- События клавиатуры
- События мыши
- Сенсорные события
- Как удалить всех дочерних элементов из элемента DOM
- Как создать атрибут HTML с помощью ванильного Javascript
- Как проверить, установлен ли флажок, используя JavaScript?
- Как скопировать в буфер обмена с помощью JavaScript
- Как отключить кнопку с помощью JavaScript
- Как сделать страницу редактируемой в браузере
- Как получить значения строки запроса в JavaScript с помощью URLSearchParams
- Как сразу удалить весь CSS со страницы
- Как использовать insertAdjacentHTML
- Safari, предупредить перед выходом
- Как добавить изображение в DOM с помощью JavaScript
- Как сбросить форму
- Как использовать Google Fonts