JavaScript свойство nodeValue

JavaScript Node

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

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

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

InterfaceЗначение nodeName
AttrЗначение атрибута.
CDATASectionСодержимое секции CDATA.
CommentСодержимое узла комментария.
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
ProcessingInstructionВсе содержимое исключая цель
TextСодержимое текстового узла.

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
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 свойства nodeValue
JavaScript Node