JavaScript Node nodeValue Property

What You’ll Learn

The Node.nodeValue property gets or sets a node’s content string when that node has one. Learn why elements return null, how text and comments store their data, and how nodeValue compares to textContent.

Introduction

Think of nodeValue as “the raw content this node owns.” Text nodes and comment nodes own a string. Element and Document nodes do not—their nodeValue is null.

That is why document.getElementById("d1").nodeValue is null even when the div visibly says “Hello world.” The words live on a child text node.

Understanding nodeValue

MDN: nodeValue returns or sets the value of the current node. For the document itself it is null. For text, comment, and CDATA nodes it is the content. For attribute nodes it is the attribute value.

• Readable and writable when the node has a string value.
• Setting has no effect when the value is defined to be null.
• Pairs well with nodeName and nodeType in sibling walks.

📝 Syntax

const value = node.nodeValue; // string | null

// When the node supports a string value:
node.nodeValue = "Updated text";

Return value

A string containing the node’s value, or null when that node type has no value.

📚 nodeValue by Node Kind

⚖️ nodeValue vs textContent

Examples Gallery

Examples follow MDN Node.nodeValue patterns. Use View Output or Try It Yourself for each case.

const d1 = document.getElementById("d1");
const text = d1.firstChild;

console.log(text.nodeName);   // "#text"
console.log(text.nodeValue);  // "Hello world"

#text
Hello world

const d1 = document.getElementById("d1");

console.log(d1.nodeValue);     // null
console.log(d1.textContent);   // "Hello world"

null
Hello world

const wrap = document.getElementById("wrap");
const comment = wrap.firstChild; // 

console.log(comment.nodeName);   // "#comment"
console.log(comment.nodeValue);  // " Example of comment "

#comment
 Example of comment 

const d1 = document.getElementById("d1");
const text = d1.firstChild;

text.nodeValue = "Updated hello";
console.log(d1.textContent); // "Updated hello"

d1.nodeValue = "No effect on Element";
console.log(d1.nodeValue);   // still null

Updated hello
null

let node = document.getElementById("sample").firstChild;
let result = "Node values are:\n";

while (node) {
  result += `Value of ${node.nodeName}: ${node.nodeValue}\n`;
  node = node.nextSibling;
}

console.log(result);

Node values are:
Value of #text: 
Value of DIV: null
Value of #text: 
Value of #comment:  Example of comment 
Value of #text: 
Value of OUTPUT: null

🚀 Common Use Cases

• Edit a known text node — assign nodeValue directly.
• Read comment bodies — inspect or transform HTML comments in the tree.
• Teach the DOM — show why element nodeValue is null.
• Sibling diagnostics — print name + value while walking with nextSibling.
• Attribute nodes — when working with Attr, value maps to nodeValue.

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• When nodeValue is defined as null, setting it has no effect.
• Related: nodeType, ownerDocument, nodeName, nextSibling, JavaScript hub.

💡 Best Practices