Объектная модель документа (DOM)

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 API
  • requestAnimationFrame(): используется для выполнения анимации, одновременно производительной и легкой для процессора.
  • 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, the body and head tags

Вот представление части DOM, показывающей тег заголовка, содержащий тег заголовка с его значением:

DOM, the head tag with the title

Вот представление части модели DOM, показывающей тег тела, содержащий ссылку, со значением и атрибут href с его значением:

DOM, the body tag with a link

Доступ к объекту 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Узел элемента

The DOM nodes

Вы также можете получить список всех узлов элементов определенного типа, например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. Это не то, чего вы обычно хотите.

Get the children of a node

Чтобы получить первый дочерний элемент Element Node, используйтеNode.firstElementChild. Чтобы получить последний дочерний узел элемента, используйтеNode.lastElementChild:

To get the first or last child Element Node

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


Больше руководств по браузеру:


Tech Wiki Online!