Дерево и узлы DOM
Модель 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 comment node -->
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 в браузере. Нажмите на новую кнопку, и цвет фона страницы изменится.
Tags: DOM, HTML