XML DOM Node Information

The information about nodes is present in the nodeName, nodeValue, and nodeType properties.

Node Properties:

A node in an XML DOM is an object with methods and properties to be accessed and managed by JavaScript. The major node properties are:

  • nodeName
  • nodeValue
  • nodeType

The nodeName Property:

To specify the name of a node, the nodeName property is used. The nodeName property is read-only. For an element node, it is the same as the tag name. For an attribute node, it is the attribute name. For a text node, the nodeName is always #text, and for the document node, it is #document.

Books.xml:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<bookstore>
<book category="Child">
<title lang="en">ABC</title>
<author>Author Name</author>
<year>2020</year>
<price>100.00</price>
</book>
<book category="IT">
<title lang="en">XQuery Book</title>
<author>Author 1</author>
<author>Author 2</author>
<author>Author 3</author>
<author>Author 4</author>
<year>2004</year>
<price>350.00</price>
</book>
</bookstore>
<bookstore> <book category="Child"> <title lang="en">ABC</title> <author>Author Name</author> <year>2020</year> <price>100.00</price> </book> <book category="IT"> <title lang="en">XQuery Book</title> <author>Author 1</author> <author>Author 2</author> <author>Author 3</author> <author>Author 4</author> <year>2004</year> <price>350.00</price> </book> </bookstore>


  
    ABC
    Author Name
    2020
    100.00
  

  
    XQuery Book
    Author 1
    Author 2
    Author 3
    Author 4
    2004
    350.00
  


Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("hello").innerHTML =
xmlDoc.documentElement.nodeName;
}
</script>
<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; document.getElementById("hello").innerHTML = xmlDoc.documentElement.nodeName; } </script>



Output:

The nodeValue Property:

To specify the value of a node, the nodeValue property is used. For element nodes, the nodeValue is undefined, for text nodes, it is in the text itself, and for attribute nodes, it is the attribute value.

Get the Value of an Element:

Here, we will retrieve the text node value of the first <title> element.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.getElementById("hello").innerHTML = x.nodeValue;
}
</script>
<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var x = xmlDoc.getElementsByTagName("title")[0].childNodes[0]; document.getElementById("hello").innerHTML = x.nodeValue; } </script>



Output:

Explanation:

In the above example, we have loaded “books.xml” into xmlDoc to get the text node of the first <title> element node. For this, we will set the text variable to be the value of the text node.

Change the Value of an Element:

Here, we will change the text node value of the first <title> element.

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p id="hello1"></p>
<p id="hello2"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x;
x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.getElementById("hello1").innerHTML = x.nodeValue;
x.nodeValue = "Alphabets";
x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.getElementById("hello2").innerHTML = x.nodeValue;
}
</script>
<p id="hello1"></p> <p id="hello2"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; var x; x = xmlDoc.getElementsByTagName("title")[0].childNodes[0]; document.getElementById("hello1").innerHTML = x.nodeValue; x.nodeValue = "Alphabets"; x = xmlDoc.getElementsByTagName("title")[0].childNodes[0]; document.getElementById("hello2").innerHTML = x.nodeValue; } </script>



Output:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
ABC
Alphabets
ABC Alphabets
ABC

Alphabets

Explanation:

In the above example, we have loaded “books.xml” into xmlDoc to get the text node of the first <title> element node. We will then change the value of the text node.

The nodeType Property:

To specify the type of node, the nodeType property is used. It is read-only. Most important node types are:

Node type NodeType
Element 1
Attribute 2
Text 3
Comment 8
Document 9

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("hello").innerHTML =
xmlDoc.documentElement.nodeName + "<br>" +
xmlDoc.documentElement.nodeType;
}
</script>
<p id="hello"></p> <script> var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); } }; xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true); xhttp.send(); function myFunction(xml) { var xmlDoc = xml.responseXML; document.getElementById("hello").innerHTML = xmlDoc.documentElement.nodeName + "<br>" + xmlDoc.documentElement.nodeType; } </script>



Output: