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

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

JavaScript свойство nodeValue объекта Node позволяет получить, или установить значение текущего узла. Когда значение nodeValue определено как null, то в этом случае его установка не окажет на элемент никакого эффекта.

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

Если узел является узлом элемента, то свойство nodeValue возвращает значение null. Если вам необходимо получить текст элемента, то не забывайте о том, что текст находится внутри текстового узла, и для его получения вы можете воспользоваться, например, свойством childNodes объекта Node, которое возвращает коллекцию всех дочерних узлов необходимого узла в виде объекта NodeList:

node.childNodes[0].nodeValue; // получаем текст элемента

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

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

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

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

Показать браузеры

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

Совместимостьapi.Node.nodeValue

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
nodeValue	✓1	✓12	✓1	✓≤12.1	✓1	✓18	✓4	✓≤12.1	✓1	✓1.0	✓4.4	✓1

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

JavaScript синтаксис

const value = node.nodeValue;

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

DOM Standard.

У первого дочернего узла не обязательно текстовый тип: он может быть элементом или комментарием, а детей может не быть вовсе. Для всего текста элемента обычно удобнее element.textContent; перед чтением firstChild.nodeValue проверьте наличие и тип узла.

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

Чтение текста дочернего узла кнопки

Нажмите ▶, затем Show value: под кнопкой появится текст её дочернего текстового узла. Измените надпись кнопки в index.html и сравните.

index.html

HTML

<button data-example-event-0="">Show value</button>
<!-- добавляем атрибут событий onclick -->
<p id="result"></p>

main.js

JavaScript

function myFunc() {
    const buttonValue = document.querySelector('button').childNodes[0].nodeValue, // получаем значение текстового узла внутри элемента <button>
        result = document.getElementById('result') // находим элемент по id

    result.innerHTML = buttonValue // добавляем в содержимое элемента строковое значение, представляющее значение узла
}

document.querySelector('[data-example-event-0]').addEventListener('click', function (event) {
    myFunc()
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию, которая с помощью свойств childNodes и nodeValue объекта Node получает значение текстового узла внутри элемента <button> и добавляет это строковое значение в содержимое элемента <p>.