При открытии любого HTML документа браузер предварительно производит разбор его содержимого и на основе этого разбора создает объектную модель HTML документа или более коротко DOM .

DOM состоит из вложенных друг в друга иерархически расположенных объектов, которые называются узлами . Каждый узел в структуре представляет располагающийся на странице HTML элемент.

Используя DOM Вы можете взаимодействовать (считывать, изменять, удалять ) с содержимым HTML документов из скриптов.

Ниже располагается код HTML документа и DOM, которая бы была создана браузером на основе этого кода:

HTML DOM.

Привет всем.

Все прямоугольники изображенные на картинке являются объектами (или узлами). Разным цветом на изображение отмечены узлы разного типа .

Красным цветом отмечен узел Document. Любое обращение к DOM должно начинаться с обращения к данному узлу.

Зеленым цветом отмечены элементные узлы . Для каждого HTML элемента на странице браузер создает соответствующий элементный узел.

Содержимое элементов хранится в текстовых узлах . Текстовые узлы отмечены на нашей схеме синим цветом.

Для каждого атрибута HTML элемента создается атрибутный узел . Атрибутный узел отмечен на схеме розовым цветом.

Обратите внимание: не забывайте, что текст всегда хранится в текстовых узлах, а не является свойством элемента. Т.е. для того, чтобы обратиться к содержимому HTML элемента Вы должны обратиться к свойству его текстового узла.

Отношения между узлами

Узлы в объектной структуре связаны друг с другом. Существует несколько специальных терминов для описания отношений между узлами:

Родительский узел (parent node ) - родительским узлом по отношению к рассматриваемому объекту является узел, в который вложен рассматриваемый объект. На нашей схеме по отношению к узлам

и

является родительским. Для узла

Название статьи

В этом коде корневым элементом является html . В него вложены элементы head и body . Элемент head содержит title , а body – h1 и div . Элемент div в свою очередь содержит h2 и p .

Теперь рассмотрим, как браузер на основании HTML-кода строит DOM-дерево.

Как строится DOM-дерево документа?

Как уже было описано выше браузер строит дерево на основе HTML-элементов и других сущностей исходного кода страницы. При выполнении этого процесса он учитывает вложенность элементов друг в друга.

В результате браузер полученное DOM-дерево использует не только в своей работе, но также предоставляет нам API для удобной работы с ним через JavaScript.

При строительстве DOM браузер создаёт из HTML-элементов, текста, комментариев и других сущностей этого языка объекты (узлы DOM-дерева).

В большинстве случаев веб-разработчиков интересуют только объекты (узлы), образованные из HTML-элементов.

При этом браузер не просто создаёт объекты из HTML-элементов, а также связывает их между собой определёнными связями в зависимости от того, как каждый из них относится к другому в коде.

Элементы, которые находятся непосредственно в некотором элементе являются по отношению к нему детьми. А он для каждого из них является родителем. Кроме этого, все эти элементы по отношению друг к другу являются сиблингами (братьями).

При этом в HTML любой элемент всегда имеет одного родителя (HTML-элемент, в котором он непосредственно расположен). В HTML у элемента не может быть несколько родителей. Исключение составляет только элемент html . У него нет родителя.

Чтобы получить DOM-дерево так как его строит браузер, необходимо просто «выстроить» все элементы в зависимости от их отношения друг к другу.

Создание DOM-дерева выполняется сверху вниз.

При этом корнем DOM-дерева всегда является сам документ (узел document). Далее дерево строится в зависимости от структуры HTML кода.

Например, HTML-код, который мы рассматривали выше будет иметь следующее DOM-дерево:

В самом верху этого дерева находится узел document . Данный узел связан с html , он является его ребёнком. Узел html образован элементом html (...). Узлы head (...) и body (...) имеют родительскую связь с html . По отношению друг ту другу они являются сиблингами, т.к. имеют одного родителя. Узел head связан с title (lt;title>...), он является его ребёнком. Узлы h1 и div связаны с body , для них он является родителем. Узел div связан с h2 (

...

) и p (), они являются его детьми.

Начинается дерево как было уже отмечено выше с объекта (узла) document . Он в свою очередь имеет один дочерний узел, образованный элементом html (...). Элементы head (...) и body (...) находятся в html и, следовательно, являются его детьми. Далее узел head является родительским для title (lt;title>...). Элементы h1 и div вложены в body , значит они являются его детьми. В div непосредственно расположены элементы h2 (

...

) и p (). Это значит, что узел div для каждого из них является родительским.

Вот так просто строится DOM-дерево в браузере на основании HTML-кода.

Зачем нужно знать, как строится DOM дерево? Во-первых, это понимание той среды, в которой вы хотите что-то изменять. Во-вторых, большинство действий при работе с DOM сводится к поиску (выбору) нужных элементов. Не зная как устроено DOM-дерево и связи между узлами найти какой-то определенный элемент в нём будет достаточно затруднительно.

Задание

На основе DOM-дерева, представленного на рисунке, создайте HTML-код.

innerHTML
var text = element.innerHTML;
element.innerHTML = "";
Присвоение нового innerHTML осуществляет перезапись кода, даже если новое значение добавлено к текущему (+=). Скрипты, добавленные таким образом, не выполняются.

outerHTML
Содержит элемент целиком, изменить его невозможно. Технически при записи в это свойство создается новый элемент, который заменяет старый. Ссылки на старый элемент в переменных не изменяются.

data
textNode.data — содержимое текстовых узлов и комментариев

textContent
element.textContent — текст внутри элемента без тегов.
Существует также нестандартное свойство innerText , имеющее с textContent много общего.

Видимость элемента

hidden
element.hidden = true
Атрибут hidden не поддерживается в IE11.

Атрибуты

Большинство стандартных атрибутов в DOM становятся свойствами объекта:
element.id = "id"
Для нестандартных атрибутов свойство не создается (undefined)

Можно создавать собственные DOM-свойства:
element.myData = {name:"John", lastName:"Smith"};
и методы:
element.myFunc = function(){alert this.nodeName};
Это работает, потому что узлы DOM являются обычными JavaScript-объектами. Такие нестандартные свойства и методы не влияют на отображение тега и видны только в JavaScript.

Доступ к атрибутам тегов:
element.hasAttribute(name)
element.getAttribute(name)
element.setAttribute(name, value)
element.removeAttribute(name)
element.attributes — псевдомассив атрибутов.

Атрибуты нечувствительны к регистру (html), а свойства чувствительны (javaScript).
Значение атрибута — всегда строка.

Атрибут: a.getAttribute("href") — отображает именно то, что в HTML
Свойство: a.href — может отличать от значения атрибута
Чаще всего свойство зависит от атрибута, но не наоборот. Изменение свойства не влияет на аттрибут.

Работа с классами

Атрибуту class соответствуют два свойства:
className — строка
classList — объект

методы объекта classList:
element.classList.contains("class") — проверка, содержит ли объект данный класс
element.classList.add("class")
element.classList.remove("class")
element.classList.toggle("class")

classList является псевдомассивом, его можно перебирать через цикл for .

data-атрибуты

Пользовательские data -атрибуты доступны не только как атрибуты, но и через свойство dataset
data-about = "some value"
element.dataset.about

Порядок узлов

parent.contains(child) — true или false
проверяет, является ли узел child вложенным в parent

nodeA.compareDocumentPosition(nodeB) — предоставляет информацию о содержании и относительном порядке элементов. Возвращаемое значение — побитовая маска:

Добавление и удаление узлов

var div = document.createElement("div")
document.createTextNode("text")

parent.appendChild(element) — элемент добавляется в конец родителя
parent.insertBefore(element, nextSibling) — элемент добавляется перед nextSibling
parent.insertBefore(element, parent.firstChild) — добавляется в начало
parent.insertBefore(element, null) — сработает как appendChild
Все методы вставки возвращают вставленный узел.
При перемещении элемента не нужно его предварительно удалять со старого места, метода вставки делают это автоматически.

element.insertAdjacentHTML(where, html) — вставка произвольного HTML-кода в любое место документа. Where указывает куда следует вставить html по отношению к element — beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(where, newElement)
element.insertAdjacentText(where, text)
два последних метода не поддерживаются в Firefox

node.append(...nodes) – вставляет nodes в конец node ,
node.prepend(...nodes) – вставляет nodes в начало node ,
node.after(...nodes) – вставляет nodes после узла node ,
node.before(...nodes) – вставляет nodes перед узлом node ,
node.replaceWith(...nodes) – вставляет nodes вместо node .
здесь nodes — это узлы или строки, в любых количествах и сочетаниях, перечисленные через запятую.

var fragment = document.createDocumentFragment() — имитация DOM-узла, который при вставке в документ исчезает, оставляя только своих потомков. В современных браузерах не рекомендуется.

element.cloneNode(true) — глубокая копия элемента
element.cloneNode(false) — копия без дочерних элементов

parent.removeChild(element)
parent.replaceChild(newElement, element)
element.remove() — удаляет элемент напрямую, без ссылки на родителя.
Методы возвращают удаленный узел