Понимание дерева DOM и узлов

Вступление

DOM часто называют * деревом DOM * и состоит из дерева объектов, называемых * узлами *. В Introduction to DOM мы рассмотрели, что такое объектная модель документа (DOM), как получить доступ к `+ document + `объект и измените его свойства с помощью console, а также разницу между исходным кодом HTML и DOM.

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

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

Понимание терминологии HTML и JavaScript имеет важное значение для понимания того, как работать с DOM. Давайте кратко рассмотрим некоторые термины HTML.

Для начала давайте взглянем на этот HTML-элемент.

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

Здесь у нас есть элемент привязки, который является ссылкой на + index.html.

+ a + - это тег *
+ href + - это атрибут *
+ index.html + - это * значение атрибута *
+ Home + - это * текст *.

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

Мы будем работать с + index.html + из учебника previous:

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 +.

index.html

...
<body>
 <h1>Document Object Model</h1>

</body>
...

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

Мы собираемся использовать метод + getElementById () + для доступа ко всему элементу. В консоли введите следующее:

document.getElementById('nav');

Output<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;

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

Это также отражено на передней части веб-сайта.

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/updated-DOM-link.png [Обновленная ссылка через DOM]

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

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

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

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

* Элемент * узлы
* Текст * узлы
* Комментарий * узлы

Когда HTML-элемент является элементом в DOM, он называется * элементным узлом *. Любой текст, находящийся вне элемента, является * текстовым узлом *, а HTML-комментарий - * комментарием *. В дополнение к этим трем типам узлов сам + document является узлом * document *, который является корнем всех других узлов.

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

Чтобы продемонстрировать, создайте файл + nodejs.html. Мы добавим текст, комментарий и узлы элементов.

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 + содержит три дочерних узла, которые все являются братьями и сестрами - тип узла не меняет уровень, на котором он вложен.

Идентифицирующий тип узла

Каждый узел в документе имеет * тип узла *, доступ к которому осуществляется через свойство + nodeType +. Сеть разработчиков Mozilla содержит обновленный список констант типа узла all. Ниже приведена диаграмма наиболее распространенных типов узлов, с которыми мы работаем в этом руководстве.

Node Type Value Example

Node Type	Value	Example
`ELEMENT_NODE`	1	The `<body>` element
`TEXT_NODE`	3	Text that is not part of an element
`COMMENT_NODE`	8	`<!-- an HTML comment -->`

ELEMENT_NODE

The <body> element

TEXT_NODE

Text that is not part of an element

COMMENT_NODE

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

В консоли * node.html * щелкните по первому элементу в + body +, который является элементом + h1 +.

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/highlighted-line.png [Тип узла DOM]

В консоли получите * тип узла * текущего выбранного узла со свойством + nodeType +.

$0.nodeType;

Output1

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

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

document.body.nodeType;

Output1

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

Модификация DOM с событиями

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

Давайте вернемся к вашему файлу + index.html и добавим элемент` + button` с + id +. Мы также добавим ссылку на новый файл в новый каталог + js in` + js / scripts.js`.

index.html

<!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="scripts.js"></script>
 </body>

</html>

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

Создайте + scripts.js + и сохраните его в новом каталоге + js +. В этом файле мы сначала найдем элемент + button + и назначим его переменной.

JS / scripts.js

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

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

JS / scripts.js

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

Наконец, внутри функции мы напишем тот же код из учебника previous, чтобы изменить цвет фона на + fuchsia + ,

JS / scripts.js

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

Вот весь наш скрипт:

JS / scripts.js

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

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

Как только вы сохраните этот файл, обновите + index.html в браузере. Нажмите на кнопку, и событие начнется.

изображение: https: //assets.digitalocean.com/articles/eng_javascript/dom/event-button.png [Изменить фон с событиями]

Цвет фона страницы изменился на фуксия из-за события JavaScript.

Заключение

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

TOC

Понимание дерева DOM и узлов

Вступление

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

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

Идентифицирующий тип узла

Модификация DOM с событиями

Заключение

Related