Свойства узлов: Тип, Тег и Содержимое

Освоение модели объекта документа (DOM) необходимо любому веб-разработчику, стремящемуся динамически манипулировать веб-страницами. В этой статье мы подробно разберем ключевые аспекты свойств узлов DOM, приводя практические примеры кода для улучшения ваших навыков программирования на JavaScript.

Понимание типов и имен узлов

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

• Узлы элементов: Представляют теги HTML или XML.
• Текстовые узлы: Содержат текст внутри элементов HTML.
• Узлы атрибутов: Атрибуты элементов HTML (не используются напрямую в современном DOM JavaScript).

Типы узлов

Этот фрагмент кода поможет вам определить тип узла, что критически важно при обходе DOM и необходимости принятия решений на основе типов узлов. Свойство nodeType является целым числом. Каждый тип узла связан с определенным числовым значением в соответствии со спецификацией DOM. Вот наиболее часто используемые типы узлов:

• Узел элемента: Обозначается числом 1. Этот тип соответствует элементам HTML или XML.
• Узел атрибута: Обозначается числом 2. Эти узлы используются для указания атрибутов элементов, хотя современный JavaScript обычно взаимодействует с атрибутами напрямую через методы getAttribute() и setAttribute(), а не рассматривает их как узлы.
• Текстовый узел: Обозначается числом 3. Это текстовые элементы, содержащиеся внутри элементов документа. Текстовые узлы могут содержать фактический текст и играют ключевую роль в манипулировании текстовым содержимым документа HTML.
• Узел комментария: Обозначается числом 8. Эти узлы представляют комментарии в файлах HTML или XML.
• Узел документа: Обозначается числом 9. Этот тип узла представляет весь документ (т. е. корневой элемент, такой как сам документ HTML).

<!-- snippet: html-result -->

<div id="example">Example node</div>
<script>
    const node = document.getElementById("example");
    node.innerHTML = 'Node type is: ' + node.nodeType;
</script>

Имена узлов

Этот пример демонстрирует, как использовать nodeName. Это свойство, показывающее имя тега, которое вы используете в вашем HTML-файле.

<!-- snippet: html-result -->

<div id="example"></div>
<script>
    const element = document.getElementById('example');
    element.innerHTML = 'nodeName: ' + element.nodeName;
</script>

Манипулирование текстовым содержимым

Изменение текстового содержимого узлов — частая задача. Свойство textContent — это мощный способ получить или установить текстовое содержимое узла и его потомков, игнорируя теги HTML.

Пример кода: Обновление текстового содержимого

Этот скрипт показывает, как обновить текстовое содержимое элемента с помощью textContent:

<!-- snippet: html-result -->

<div id="example"></div>
<script>
  const element = document.getElementById('example');
  element.textContent = 'Updated text content';
</script>

Заключение

Понимание и манипулирование свойствами узлов DOM — фундаментальный навык для любого разработчика JavaScript. Изучив правильное использование таких свойств, как nodeName и textContent, вы сможете эффективно управлять элементами на своих веб-страницах. Эти примеры создают прочную основу для выполнения распространенных задач, связанных с узлами DOM.

Практика