itmo_conspects

Лекция 7. Объектная модель документа

С помощью JavaScript можно изменять структуру HTML-документа, напрямую модифицируя объектную модель документа (DOM, Document Object Model). Объектная модель обеспечивает доступ ко всем тегам и их атрибутам, позволяет создавать, удалять и изменять элементы

HTML-элементы представляют из себя дерево, в котором узлы - это элементы. Вложенность HTML-элементов обозначается дочерними связями в дереве

Всего существует 12 типов узлов в объектной модели:

• ELEMENT_NODE = 1
• ATTRIBUTE_NODE = 2
• TEXT_NODE = 3
• и еще другие девять

ELEMENT_NODE представляет элемент, который задается HTML-тегом, а TEXT_NODE - это узел с сырым текстом

Так <p>Это параграф</p> преобразуется в дерево с узлом p типа ELEMENT_NODE и дочерний текстовый узел Это параграф типа TEXT_NODE

Корень дерева в JavaScript представлен объектом document. От него можно получить непосредственно элемент html с помощью document.documentElement и элемент body с помощью document.body

---

В JavaScript есть 6 основных методов получения элементов из дерева объектной модели:

• document.getElementById(id) возвращает элемент с идентификатором id (наиболее рекомендованный метод для работы с элементами)
• document.getElementsByTagName(tag) возвращает массив элементов с тегом tag
• document.getElementsByName(elementName) возвращает массив элементов, у которых атрибут name равен elementName
• document.getElementsByClassName(elementClass) возвращает массив элементов с классом elementClass
• document.querySelector(selector) возвращает первый элемент, который соответствует селектору selector
• document.querySelector(selector) возвращает массив элементов, которые соответствуют селектору selector

Далее от них можно идти по дереву с помощью свойств:

• node.parentNode - родительский узел
• node.childNodes[i] - дочерние узлы
• node.firstChild - первый дочерний узел
• node.lastChild - последний дочерний узел
• node.previousSibling - предыдущий соседний узел у того же родителя
• node.nextSibling - следующий соседний узел

С ними нужно быть осторожными, так как некоторые браузеры обрабатывают новую строку в HTML-документе как текстовый узел

Еще узлы имеют такие свойства:

• node.nodeType - тип узла (число из перечислений, 1 для обычного узла, 3 для текстового)
• node.tagName - тег узла
• node.nodeName - имя узла. Если узел - это тег, то это имя тега, если текст, то #text, если комментарий, то #comment и так далее

---

Содержимое элемента можно узнать или заменить с помощью:

• node.innerText - текст, отображаемый в окне браузера, внутри тега
• node.outerText - текст, отображаемый в окне браузера, включая исходный тег
• node.innerHTML - HTML-код внутри тега
• node.outerHTML - HTML-код, включая тег

Значения innerText и outerText равны, однако при записи строка принимается как экранированный текст, а не HTML-код, поэтому запись в outerText ведет к удалению исходного элемента

Запись свойств innerHTML и outerHTML ведет к парсингу нового значения и изменения объектной модели. Для изменения HTML-страницы предпочтительнее использовать не эти свойства, принимающие строки, а методы node.appendChild, node.insertBefore и другие

Также есть свойство node.textContent, которое показывает весь текст, включая скрытый с помощью display: none

---

Для редактирования дерева есть методы:

• const elem = document.createElement(tagName) создает элемент с тегом tagName, но только на уровне интерпретатора JavaScript
• const elem = document.createTextNode(text) аналогично создает текстовый узел
• node.appendChild(elem) добавляет этот элемент в дерево в качестве дочернего узла
• node.insertBefore(elem) добавляет этот элемент в дерево перед узлом node
• node.removeChild(childNode) удаляет дочерний элемент childNode из дерева
• node.remove() удаляет этот элемент из дерева

При вызове таких методов происходит событие пересчета дерева (reflow event), который можно поймать в своем скрипте (об этом позже)

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

• node.createAttribute(name) создает атрибут name
• node.createAttribute(name, value) создает атрибут name со значением value
• node.removeAttribute(name) удаляет атрибут name
• node.getAttribute(name) возвращает значение атрибута name

Обработка событий

На жизненном цикле веб-страницы может происходить множество событий, например, нажатие кнопки или прокрутка колеса мыши

Событие - это сигнал браузера о том, что что-то произошло. Для них браузер предоставляет API

Так событие возникает для какого-то элемента, и браузер вызывает для этого события привязанные к элементу функции JavaScript

События можно добавлять:

• с помощью атрибута onXYZ="myFunction()", где XYZ - тип события, например: <button onclick="alert('Клик!')">Клик!</button

• с помощью свойства:

    elem.onclick = function() {
        alert('Клик');
    };
  

• с помощью метода elem.addEventListener(eventType, callback):

    elem.addEventListener("click", function() {
        alert('Клик');
    });
  

  Такой метод является наиболее предпочтительным, потому что предыдущие ограничены только одной функцией, которые отвечают на событие. addEventListener позволяет добавить множество обработчиков

С помощью событий можно обрабатывать нажатия на элемент (click), наведение на элемент (mouseover), на правый клик мыши (contextmenu), на нажатие клавиатуры (keydown), на отправку формы (submit) и многое другое

Самое важное событие - DOMContentLoaded у document. Оно вызывается тогда, когда дерево объектной модели документа полностью загружено браузером, и над ним безопасно работать внутри JavaScript-кода. Поэтому весь код, требующий работы с элементами ограничивают в обрабатывающей функции:

document.addEventListener("DOMContentLoaded", function () {
    const elem = document.getElementById("myid");

    // ...
});

This site is open source. Improve this page.