Когда вы открываете веб-страницу в браузере, он получает исходный текст HTML и разбирает (парсит) его примерно так, как наш парсер из главы 11 разбирал программу. Браузер строит модель структуры документа и использует её, чтобы нарисовать страницу на экране.

Это представление документа и есть одна из игрушек, доступных в песочнице JavaScript. Вы можете читать её и изменять. Она изменяется в реальном времени – как только вы её подправляете, страница на экране обновляется, отражая изменения.

Структура документа

Можно представить HTML как набор вложенных коробок. Теги вроде

  
 Моя домашняя страничка 

  
Привет, я Марейн и это моя домашняя страничка.

  
А ещё я книжку написал! Читайте её

   здесь.

У этой страницы следующая структура:

Структура данных, использующаяся браузером для представления документа, отражает его форму. Для каждой коробки есть объект, с которым мы можем взаимодействовать и узнавать про него разные данные – какой тег он представляет, какие коробки и текст содержит. Это представление называется Document Object Model (объектная модель документа), или сокращённо DOM.

Мы можем получить доступ к этим объектам через глобальную переменную

document

documentElement

head

body

Деревья

Вспомните синтаксические деревья из главы 11. Их структура удивительно похожа на структуру документа браузера. Каждый узел может ссылаться на другие узлы, у каждого из ответвлений может быть своё ответвление. Эта структура – типичный пример вложенных структур, где элементы содержат подэлементы, похожие на них самих.

Мы зовём структуру данных деревом, когда она разветвляется, не имеет циклов (узел не может содержать сам себя), и имеет единственный ярко выраженный «корень». В случае DOM в качестве корня выступает document.documentElement.

Деревья часто встречаются в вычислительной науке. В дополнение к представлению рекурсивных структур вроде документа HTML или программ, они часто используются для работы с сортированными наборами данных, потому что элементы обычно проще найти или вставлять в отсортированное дерево, чем в отсортированный одномерный массив.

У типичного дерева есть разные узлы. У синтаксического дерева языка Egg были переменные, значения и приложения. У приложений всегда были дочерние ветви, а переменные и значения были «листьями», то есть узлами без дочерних ответвлений.

То же и у DOM. Узлы для обычных элементов, представляющих теги HTML, определяют структуру документа. У них могут быть дочерние узлы. Пример такого узла —

document.body

У каждого узлового объекта DOM есть свойство

nodeType

document.ELEMENT_NODE

document.TEXT_NODE

document.COMMENT_NODE

То есть, вот ещё один способ графически представить дерево документа:

Листья – текстовые узлы, а стрелки показывают взаимоотношения отец-ребёнок между узлами.

Стандарт

Использовать загадочные цифры для представления типа узла – это подход не в стиле JavaScript. Позже мы встретимся с другими частями интерфейса DOM, которые тоже кажутся чуждыми и нескладными. Причина в том, что DOM разрабатывался не только для JavaScript. Он пытается определить интерфейс, не зависящий от языка, который можно использовать и в других системах – не только в HTML, но и в XML, который представляет из себя формат данных общего назначения с синтаксисом, напоминающим HTML.

Получается неудобно. Хотя стандарты – и весьма полезная штука, в нашем случае преимущество независимости от языка не такое уж и полезное. Лучше иметь интерфейс, хорошо приспособленный к языку, который вы используете, чем интерфейс, который будет знаком при использовании разных языков.

Чтобы показать неудобную интеграцию с языком, рассмотрим свойство

childNodes

length

NodeList

forEach

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

Но эти проблемы не фатальные. JavaScript позволяет создавать абстракции. Легко написать вспомогательные функции, позволяющие выражать операции более понятно и коротко. Вообще, такого рода инструменты предоставляют много библиотек, направленных на программирование для браузера.

Обход дерева

Узлы DOM содержат много ссылок на соседние. Это показано на диаграмме:

Хотя тут показано только по одной ссылке каждого типа, у каждого узла есть свойство

parentNode

childNodes

В теории можно пройти в любую часть дерева, используя только эти ссылки. Но JavaScript предоставляет нам много дополнительных вспомогательных ссылок. Свойства

firstChild

lastChild

null

previousSibling

nextSibling

previousSibling

null

nextSibling

null

При работе с такими вложенными структурами пригождаются рекурсивные функции. Следующая ищет в документе текстовые узлы, содержащие заданную строку, и возвращает

true

function talksAbout(node, string) {

 if (node.nodeType == document.ELEMENT_NODE) {

  for (var i = 0; i < node.childNodes.length; i++) {

   if (talksAbout(node.childNodes[i], string))

    return true;

  }

  return false;

 } else if (node.nodeType == document.TEXT_NODE) {

  return node.nodeValue.indexOf(string) > -1;

 }

}

console.log(talksAbout(document.body, "книг"));

// → true

Свойства текстового узла

nodeValue

Поиск элементов

Часто бывает полезным ориентироваться по этим ссылкам между родителями, детьми и родственными узлами и проходить по всему документу. Однако если нам нужен конкретный узел в документе, очень неудобно идти по нему, начиная с

document.body

body

h1

p

Так что если нам нужен атрибут

href

var link = document.body.getElementsByTagName("a")[0];

console.log(link.href);

У всех узлов-элементов есть метод

getElementsByTagName

Чтобы найти конкретный узел, можно задать ему атрибут

id

document.getElementById

Мой страус Гертруда:

Третий метод –

getElementsByClassName

getElementsByTagName

Меняем документ

Почти всё в структуре DOM можно менять. У узлов-элементов есть набор методов, которые используются для их изменения. Метод

removeChild

appendChild

insertBefore

Один

Два

Три

Узел может существовать в документе только в одном месте. Поэтому вставляя параграф «Три» перед параграфом «Один» мы фактически удаляем его из конца списка и вставляем в начало, и получаем «Три/Один/Два». Все операции по вставке узла приведут к его исчезновению с текущей позиции (если у него таковая была).

Метод

replaceChild

replaceChild

insertBefore

Создание узлов

В следующем примере нам надо сделать скрипт, заменяющий все картинки (тег

alt

Для этого надо не только удалить картинки, но и добавить новые текстовые узлы им на замену. Для этого мы используем метод

document.createTextNode

Это  в

 .

Заменить

Получая строку,

createTextNode

Цикл по картинкам начинается в конце списка узлов. Это сделано потому, что список узлов, возвращаемый методом

getElementsByTagName

childNodes

i

Если вам нужно работать с фиксированным списком узлов вместо «живого», можно преобразовать его в настоящий массив при помощи метода

slice

var arrayish = {0: "один", 1: "два", length: 2};

var real = Array.prototype.slice.call(arrayish, 0);

real.forEach(function(elt) { console.log(elt); });

// → один

//  два

Для создания узлов-элементов (тип 1) можно использовать

document.createElement

elt

Никакая книга не может быть закончена. Во время работы над ней мы узнаём достаточно для того, чтобы найти её незрелой сразу же после того, как мы отвлеклись от неё.

Атрибуты

К некоторым элементам атрибутов, типа

href

Но HTML позволяет назначать узлам любые атрибуты. Это полезно, т. к. позволяет вам хранить дополнительную информацию в документе. Если вы придумаете свои названия атрибутов, их не будет среди свойств узла-элемента. Вместо этого вам надо будет использовать методы

getAttribute

setAttribute

Код запуска 00000000.

У кошки четыре ноги.

Рекомендую перед именами придуманных атрибутов ставить

data-

 (“preformatted”, предварительно отформатированный – используется для кода и простого текста) с атрибутом 
data-language
 (язык) и довольно грубо пытается подсветить ключевые слова в языке.

    
function highlightCode(node, keywords) {

    
 var text = node.textContent;

    
 node.textContent = ""; // Очистим узел

    

    
 var match, pos = 0;

    
 while (match = keywords.exec(text)) {

    
  var before = text.slice(pos, match.index);

    
  node.appendChild(document.createTextNode(before));

    
  var strong = document.createElement("strong");

    
  strong.appendChild(document.createTextNode(match[0]));

    
  node.appendChild(strong);

    
  pos = keywords.lastIndex;

    
 }

    
 var after = text.slice(pos);

    
 node.appendChild(document.createTextNode(after));

    
}

    
Функция 
highlightCode
 принимает узел 
 и регулярку (с включённой настройкой global), совпадающую с ключевым словом языка программирования, которое содержит элемент.

    
Свойство 
textContent
 используется для получения всего текста узла, а затем устанавливается в пустую строку, что приводит к очищению узла. Мы в цикле проходим по всем вхождениям выражения keyword, добавляем между ними текст в виде простых текстовых узлов, а совпавший текст (ключевые слова) добавляем, заключая их в элементы 
 (жирный шрифт).

    
Мы можем автоматически подсветить весь код страницы, перебирая в цикле все элементы 
, у которых есть атрибут 
data-language
, и вызывая на каждом 
highlightCodeс
 правильной регуляркой.

    
var languages = {

    
 javascript: /\b(function|return|var)\b/g /* … etc */

    
};

    

    
function highlightAllCode() {

    
 var pres = document.body.getElementsByTagName("pre");

    
 for (var i = 0; i < pres.length; i++) {

    
  var pre = pres[i];

    
  var lang = pre.getAttribute("data-language");

    
  if (languages.hasOwnProperty(lang))

    
   highlightCode(pre, languages[lang]);

    
 }

    
}

    
Вот пример:
    

    
А вот и она, функция идентификации:

    

    
function id(x) { return x; }

    
Есть один часто используемый атрибут, 
class
, имя которого является ключевым словом в JavaScript. По историческим причинам, когда старые реализации JavaScript не умели обращаться с именами свойств, совпадавшими с ключевыми словами, этот атрибут доступен через свойство под названием 
className
. Вы также можете получить к нему доступ по его настоящему имени 
class
 через методы 
getAttribute
 и 
setAttribute
.