JavaScript свойство Node.nodeName

Определение и применение

JavaScript свойство nodeName объекта Node возвращает строку (DOMString), содержащую имя текущего узла. Свойство доступно только для чтения.

Перечень возможных значений в зависимости от типа узла представлен в следующей таблице:

Значения nodeName для разных типов узлов
Интерфейс	Значение `nodeName`
`Attr`	Значение свойства `Attr.name`
`CDATASection`	`"#cdata-section"`
`Comment`	`"#comment"`
`Document`	`"#document"`
`DocumentFragment`	`"#document-fragment"`
`DocumentType`	Значение свойства `DocumentType.name`
`Element`	Значение свойства `Element.tagName`
`ProcessingInstruction`	Значение свойства `ProcessingInstruction.target`
`Text`	`"#text"`

Поддержка браузерами

Спецификация: dom.spec.whatwg

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьapi.Node.nodeName
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`nodeName`	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript

const name = node.nodeName;

Спецификация

DOM Standard.

Пример использования

Имена дочерних узлов блока

Нажмите ▶, затем Show node names: под кнопкой появятся имена дочерних узлов блока — #text, #comment и UL. Удалите комментарий в index.html и сравните список.

index.html

HTML

<button data-migration-click-0="">Show node names</button>
<div id="block">
  <!-- my comment -->
  <ul>
    <li>list item</li>
    <li>list item</li>
    <li>list item</li>
  </ul>
</div>
<p id="result"></p>

main.js

JavaScript

function myFunc() {
    const parentElem = document.getElementById('block'),
        parentElemChildNodes = parentElem.childNodes,
        result = document.getElementById('result')

    for (let i = 0; i < parentElemChildNodes.length; i++) {
        result.innerHTML += parentElemChildNodes[i].nodeName + '<br>'
    }
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая:

Инициализирует три переменные, которые содержат ссылку на элемент, значения имен дочерних узлов которого мы будем выводить, коллекцию всех дочерних узлов этого элемента (используем для этого свойство childNodes) и ссылку на элемент в который мы будем выводить результат.
С помощью цикла мы проходим по всей коллекции узлов и добавляем в элемент <p> строковое значение, определяющее имя текущего узла коллекции и тег переноса строки (<br>).

В результате чего мы получили следующие имена (значения):

#text - (текстовый узел - пробел перед узлом комментария).
#comment - (узел комментария).
#text - (текстовый узел - пробел после узла комментария).
UL - (узел элемента - элемент <ul>). У элементов пространства имён HTML в HTML-документе имя возвращается в верхнем регистре. В XHTML и других XML-документах исходный регистр сохраняется.
#text - (текстовый узел - пробел после элемента <ul>).