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:

<?xml version="1.0" encoding="UTF-8"?>
<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>

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("hello").innerHTML =
    xmlDoc.documentElement.nodeName;
}
</script>
 
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "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>
 
</body>
</html>

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:

<!DOCTYPE html>
<html>
<body>
 
<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("GET", "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>
</body>
</html>

Output:

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:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></p>
 
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this);
    }
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
 
function myFunction(xml) {
    var xmlDoc = xml.responseXML;
    document.getElementById("hello").innerHTML =
    xmlDoc.documentElement.nodeName + "<br>" +
    xmlDoc.documentElement.nodeType;
}
</script>
 
</body>
</html>

Output:

Please Share