HTML - DOM Element nodeValue Property

Quiz

The HTML DOM Element nodeValue property is used for accessing and updating the value of a node. When accessing nodeValue, ensure that the node has a child to access its value; otherwise you will get 'null'.

The HTML DOM Element nodeValue property is used to get (retrieve) and update (set) a node's value of an element in the document. In HTML, a node is a basic unit that makes up a document.

Syntax

Following is the syntax of the HTML DOM Element nodeValue (to set the property) −

node.nodeValue = newValue;

Here, the newValue is the value you want to set for nodeValue property.

Use the following syntax to get the nodeValue property −

node.nodeValue;

Parameters

Since this is a property, it does not accept any parameter.

Return Value

This property returns a string containing the text content of a node, If the node does not contain the text content it returns null.

Example 1: Retrieving Content Using nodeValue Property

The following program demonstrates the usage of the HTML DOM Element nodeValue property. It retrieves the <p> element content −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element nodeValue</title>
</head>
<body>
<h3>HTML DOM Element nodeValue Property</h3>
<p>Updates the text content within an element.</p>  
<div id="myDiv">
<p id="myg">This is the initial text content.</p>
<button onclick="updateContent()">Get Content</button>
</div>    
<script>
   function updateContent() {
      var para = document.getElementById('myg');      
      alert("Content: " + para.firstChild.nodeValue);
   }
</script>
</body>
</html>

The above program displays the content of the paragraph (p) element.

Example 2: Setting the nodeValue Property

Here is another example of the HTML DOM Element nodeValue property. We use this property to set (update) the first list (<li>) item −

<!DOCTYPE html>
<html lang="en">
<head>    
<title>HTML DOM Element nodeValue</title>
</head>
<body>
<h3>HTML DOM Element nodeValue Example</h3>
<p>Updates Text for First Node:</p> 
<ul id="myL">
   <!-- Initial list items -->
   <li>This is item 1</li>
   <li>This is item 2</li>
   <li>This is item 3</li>
</ul>
<button onclick="updateItem()">Update First Item</button>
<script>
function updateItem() {
    var list = document.getElementById('myL');
    // Use firstElementChild to skip text nodes
    var firstItem = list.firstElementChild;  
    // Check if first child is an li element
    if (firstItem !== null) {
        firstItem.textContent = 'Updated text for item 1';
    }
}
</script>
</body>
</html>

After running the program, a list of three items is displayed. When the button is clicked, the first item will be updated.

Example 3: Displays the Information About the First Child

This example shows how to access and display the information about the first child node of an element with the help of an nodeValue property within an HTML DOM Element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element nodeValue</title>
</head>
<body>
<h3>HTML DOM Element nodeValue Property</h3>
<p>Displays the information about the first Child Node:</p> 
<div id="my">
<!-- First child node -->
<p>Content of the first child node.</p>
</div>
<div id="res"></div>
<script>
window.onload = function() {
   var divElement=document.getElementById('my');
   var firstChild = divElement.firstChild;
   var nodeName = firstChild.nodeName;
   var nodeValue =firstChild.nodeValue||'N/A';
   var nodeType = firstChild.nodeType;
   var resultDiv=document.getElementById('res');
   resultDiv.innerHTML = 
   '<p>Node Name: ' + nodeName + '</p>' +
   '<p>Node Value: ' + nodeValue + 
   "Content of the first child node"+'</p>'+
   '<p>Node Type: ' + nodeType + '</p>';
};
</script>
</body>
</html>

The above program displays the information about the first child node of an element.

Supported Browsers

Property
nodeValue	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page