Объект Node. Навигация по DOM
Каждый отдельный узел, будь то html-элемент, его атрибут или текст, в структуре DOM представлен объектом Node. Этот объект предоставляет ряд свойств, с помощью которых мы можем получить информацию о данном узле:
- childNodes: содержит коллекцию дочерних узлов
- firstChild: возвращает первый дочерний узел текущего узла
- lastChild: возвращает последний дочерний узел текущего узла
- previousSibling: возвращает предыдущий элемент, который находится на одном уровне с текущим
- nextSibling: возвращает следующий элемент, который находится на одном уровне с текущим
- ownerDocument: возвращает корневой узел документа
- parentNode: возвращает элемент, который содержит текущий узел
- nodeName: возвращает имя узла
- nodeType: возвращает тип узла в виде числа
- nodeValue: возвращает или устанавливает значение узла в виде простого текста
Перебирем все дочерние узлы элемента:
Заголовок статьи
Первый абзац
Второй абзац
С помощью метода document.querySelector("div.article") выбираем элемент div с классом article и пробегаемся по его дочерним узлам. И в цикле выводим имя узла и его тип с помощью свойств nodeName и nodeType. Каждому типу соответствует определенное число: Но несмотря на то, что в блоке div на странице только три узла: h3 и 2 параграфа, но консоль отобразит нам пять узлов.