JavaScript свойство nodeValue

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

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

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

Interface	Значение nodeName
Attr	Значение атрибута.
CDATASection	Содержимое секции CDATA.
Comment	Содержимое узла комментария.
Document	null
DocumentFragment	null
DocumentType	null
Element	null
NamedNodeMap	null
EntityReference	null
ProcessingInstruction	Все содержимое исключая цель
Text	Содержимое текстового узла.

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

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

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

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`nodeValue`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

const value = node.nodeValue;

node - Node

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

Document Object Model (DOM) Level 2

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript свойства nodeValue</title>
	</head>
	<body>
		<button onclick = "myFunc()">Show value</button> <!-- добавляем атрибут событий onclick -->
		<p id = result"></p>
		<script>
	function myFunc() {
	  const buttonValue = document.querySelector("button").childNodes[0].nodeValue, // получаем значение текстового узла внутри элемента <button>
	        result =  document.getElementById("result"); // находим элемент по id
    
	  result.innerHTML = buttonValue; // добавляем в содержимое элемента строковое значение, представляющее значение узла
	}
		</script>
	</body>
</html>

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

Результат нашего примера:

Пример использования JavaScript свойства nodeValue

JavaScript Node