Узлы и элементы DOM-дерева в JavaScript
На предыдущем уроке мы рассмотрели дерево, состоящее из узлов, образованных элементами. Но, узлы в дереве образуются не только на основе элементов, но и на основе текста, комментариев и вообще на основе всего, что есть у нас в HTML коде.
h1
, тоже является узлом. Но он является не узлом элемента, а текстовым узлом. Данный текстовый узел будет являться дочерним по отношению к узлу, образованным элементом h1
.
<h1>Заголовок документа</h1>
Узлы в дереве бывают различных типов, но в основном используются узлы, образованные на основе HTML элементов и текста. Всего типов узлов в DOM 12, но в настоящее время разработчикам сценариев JavaScript рекомендуют использовать только 7.
Типы узлов (NODE) документа
Код типа (nodeType) | Тип узла | Описание |
---|---|---|
1 | ELEMENT_NODE | Узел элемента |
3 | TEXT_NODE | Текстовый узел (#text) |
7 | PROCESSING_INSTRUCTION_NODE | Узел инструкции обработки |
8 | COMMENT_NODE | Узел комментария (#comment) |
9 | DOCUMENT_NODE | Узел документа (#document) |
10 | DOCUMENT_TYPE_NODE | Узел типа документа |
11 | DOCUMENT_FRAGMENT_NODE | Узел фрагмента документа |
У каждого узла есть определённый тип, который определяется числом от 1 до 12. Например, узел элемента определяется числом 1, текстовый узел числом 3 и т.д. Определить тип узла в JavaScript можно с помощью свойства nodeType
.
Например, откроем любую страницу в браузере и определим тип узла document
:
Кроме определения типа узла (nodeType
) с помощью JavaScript можно также узнать его имя и значение:
nodeName
— возвращает имя узла. Если узел является элементом, то свойствоnodeName
возвращает имя тега. Для других типов узлов данное свойство будет возвращать различные имена: "#text" (для текстовых узлов), "#comment" для комментариев, "#document" для документа и .т.д.nodeValue
— строка, представляющая значение узла. Возвращает следующие значения в зависимости от типа узла:- возвращает
null
для узла элемента и узла документа; - возвращает содержимое для текстового узла;
- возвращает контент для узла комментария.
- возвращает
Дерево узлов документа
Если перейти к примеру, который мы рассматривали на предыдущем уроке, то можно увидеть что дерево документа состоит только из узлов, образованными элементами.
<html> <head> <title>Заголовок страницы</title> </head> <body> <h1>Название статьи</h1> <div> <h2>Раздел статьи</h2> <p>Содержимое статьи</p> </div> </body> </html>
Данное дерево является не полным, т.е. в данное дерево необходимо добавить остальные узлы: текстовые узлы, узлы комментариев, узлы документа и т.д.
Инспектор DOM
В Mozilla Firefox существует расширение "DOM Inspector", с помощью которого Вы можете увидеть дерево документа.
Для того чтобы зайти в этот инструмент, нажмите в Firefox на кнопку "Меню" -> "Разработка" -> "Инспектор DOM" или комбинацию клавиш Ctrl+Shift+I.
Задание
- Что содержится в текстовых узлах дерева, представленного на этом уроке?
- Измените код HTML документа, представлено на этом уроке таким образом, чтобы в дереве было как можно меньше ненужных текстовых узлов.
prntscr.com/qbxhu1
Специально создал простую страничку для лучшего понимания DOM, но есть моменты с непредсказуемым результатом. Созданы 2 div-a и по сути div с индексом (0) и div с индексом (1). Внутри каждого 2 элемента с индексами 0 и 1. Почему в первом случае выводится только 0-ой «ребенок» div-а, а во втором случае и 0-ой и 1-вый «ребенок».
Спасибо
В примере забыл теги div закрыть:
Да и не совсем понял суть задания (Измените код HTML документа, представлено на этом уроке таким образом, чтобы в дереве было как можно меньше ненужных текстовых узлов.)
В этом случае можете использовать этот пример в песочнице.
В этом примере написан код JavaScript, который перебирает DOM узлы документа и выводит их на экран в виде схемы с учетом их вложенности. Все текстовые узлы документа в ней выводятся как #text.
Ваша задача изменить HTML код так, чтобы при выводе не было ненужных текстовых узлов.
(код VBA Excel)
2 способа загнать в переменную слитый текст из 2-х переменных и прбела.
sName = a.getElementsByClassName(«text»)(3).FirsChild.textContent _
& " " & a.getElementsByClassName(«text»)(3).LastChild.textContent
sName = a.getElementsByClassName(«text»)(3).Children(0).textContent _
& " " & a.getElementsByClassName(«text»)(3).Children(1).textContent
Кроме FirsChild и LastChild есть еще какие-нибудь Child? Где почитать?
Спасибо
Почитать про методы для поиска узлов можно в этой статье, а про методы, основанные на связях — здесь.