Дерево и узлы DOM

Amber

5 лет назад

Модель DOM часто называют деревом DOM, поскольку она состоит из дерева объектов, называемых узлами. В предыдущем мануале вы узнали, что такое Document Object Model (DOM), как получить доступ к объекту document и изменить его свойства с помощью консоли, также мы разницу между исходным кодом HTML и DOM.

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

Терминология HTML

Понимание терминов HTML и JavaScript критически необходимо для работы с DOM. Давайте вкратце рассмотрим основные термины.

Посмотрите на этот элемент HTML:

<a href="index.html">Home</a>

В нем присутствует анкор, который является ссылкой на index.html.

a – тег
href – атрибут
html – значение атрибута
Home – текст.

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

Вернемся к файлу index.html из предыдущего мануала:

<!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> </body> </html>

Самый простой способ доступа к элементу с JavaScript – это атрибут id. Давайте добавим указанную выше ссылку в файл index.html с id=”nav”.

... <body> <h1>Document Object Model</h1> <a id="nav" href="index.html">Home</a> </body> ...

Загрузите (или обновите) страницу в окне браузера и посмотрите на DOM, чтобы убедиться, что код был обновлен.

Затем используйте метод getElementById() для доступа ко всему элементу. В консоли введите следующее:

document.getElementById('nav'); <a id="nav" href="index.html">Home</a>

Метод getElementById() извлечет весь элемент. Теперь вместо того, чтобы вводить этот объект и метод каждый раз, когда вам нужно получить доступ к ссылке nav, вы можете поместить элемент в переменную, чтобы с ним было проще работать.

let navLink = document.getElementById('nav');

Переменная navLink содержит анкор. Здесь можно легко изменять атрибуты и значения. Например, чтобы изменить место ссылки, измените атрибут href:

navLink.href = 'https://www.wikipedia.org';

Также можно изменить текст, переназначив свойство textContent:

navLink.textContent = 'Navigate to Wikipedia';

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

navLink; <a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

Изменения отобразятся и на фронт-энде.

Обновление страницы вернет все исходные значения.

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

Дерево и узлы DOM

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

Узел элемента
Текстовый узел
Узел комментария

Когда элемент HTML является элементом в DOM, он называется узлом элемента. Любой одиночный текст вне элемента является текстовым узлом, а комментарий HTML – узлом комментария. Помимо этих трех типов узлов, сам объект document – это узел документа, который является корневым узлом всех остальных узлов.

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

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

<!DOCTYPE html> <html> <head> <title>Learning About Nodes</title> </head> <body> <h1>An element node</h1>  A text node. </body> </html>

Узел элемента html является родительским. head и body – дочерние узлы html. body содержит три дочерних узла, и все они находятся на одном уровне – тип узла не влияет на уровень вложения.

Примечание: При работе с DOM, сгенерированным HTML, отступы исходного кода HTML создают много пустых текстовых узлов, которые не будут видны во вкладке DevTools Elements. Больше об этом по ссылке.

Определение типа узла

Каждый узел в документе имеет тип, доступ к которому осуществляется через свойство nodeType. В Mozilla Developer Network имеется обновленный список всех констант типов узлов. Ниже приведена таблица наиболее распространенных типов узлов.

Тип узла	Значение	Пример
ELEMENT_NODE	1	Элемент <body>
TEXT_NODE	3	Текст, который не является частью элемента
COMMENT_NODE	8	<!– комментарий HTML –>

Во вкладке Elements в Developer Tools вы можете заметить, что всякий раз, когда вы нажимаете и выделяете любую строку в DOM, рядом с ней появляется значение == $0. Это очень удобный способ получить доступ к текущему активному элементу.

В консоли node.html нажмите на первый элемент в body (h1).

С помощью консоли узнайте тип выбранного узла с помощью свойства nodeType.

$0.nodeType; 1

Выбрав элемент h1, вы увидите 1 как вывод, который относится к ELEMENT_NODE. Сделайте то же самое с другими узлами, и они вернут 3 и 8 соответственно.

Зная, как получить доступ к элементу, вы можете увидеть тип узла, не выделяя элементы в DOM.

document.body.nodeType; 1

В дополнение к nodeType вы также можете использовать свойство nodeValue, чтобы узнать значение текстового узла или узла комментария, а nodeName – для получения тега элемента.

Изменение DOM с помощью событий

До сих пор вы видели, как изменять DOM в консоли, а такие изменения, как известно, временные; каждый раз, когда страница обновляется, все изменения теряются. В первом мануале вы обновляли цвет фона страницы в консоли. Попробуйте объединить то, чему вы научились в этом мануале, с тем, что вы уже знаете, чтобы создать интерактивную кнопку, которая будет менять цвет фона.

Вернитесь в файл index.html и добавьте элемент button с id. Также нужно добавить ссылку на новый файл в новый js-каталог js/scripts.js.

<!DOCTYPE html> <html lang="en"> <head> <title>Learning the DOM</title> </head> <body> <h1>Document Object Model</h1> <button id=”changeBackground”>Change Background Color</button> <script src=”js/script.js”></script> </body> </html>

Событие в JavaScript – это действие, которое выполняет пользователь. Пользователь наводит указатель мыши на элемент, нажимает на него или на определенную клавишу на клавиатуре – это все события. В этом конкретном случае кнопка должна выполнить действие, когда пользователь нажмет на нее. Для этого нужно добавить слушателя событий. Создайте файл scripts.js и сохраните его в новом каталоге js. В файле нужно определить элемент button и присвоить его переменной.

let button = document.getElementById('changeBackground');

Используя метод addEventListener(), кнопка будет прослушивать клики и выполнять свою функцию после клика.

... button.addEventListener('click', () => { // action will go here });

Внутри функции нужно поместить код из предыдущего мануала, чтобы изменить цвет фона на fuchsia.

... document.body.style.backgroundColor = 'fuchsia';

Так выглядит скрипт:

let button = document.getElementById('changeBackground'); button.addEventListener('click', () => { document.body.style.backgroundColor = 'fuchsia'; });

Сохраните и закройте файл. Обновите страницу index.html в браузере. Нажмите на новую кнопку, и цвет фона страницы изменится.