XML DOM Get Node Values

To get the text value of a node, we can use the nodeValue property and to get the value of an attribute, we can use the getAttribute() method.

Get the Value of an Element:

Everything is a node in the DOM. There is no text value in the element nodes, but is stored in a child node, also called a text node. The value of the elements’ text node must be retrieved to retrieve the text value of an element.

The getElementsByTagName Method:

A node list of all elements, with the specified tag name, is returned by the getElementsByTagName() method in the same order as they appear in the source document.

Example:

var x = xmlDoc.getElementsByTagName("title")[0];

Explanation:

Here, “books.xml” has been loaded into xmlDoc and we are retrieving its first <title> element.

The ChildNodes Property:

To return a list of an element’s child nodes the childNodes property is used.

Example: To retrieve the text node of the first <title> element:

x = xmlDoc.getElementsByTagName("title")[0];
y = x.childNodes[0];

The nodeValue Property:

To return the text value of a text node, the nodeValue property is used.

Example: To retrieve the text value of the text node of the first <title> element:

x = xmlDoc.getElementsByTagName("title")[0];
y = x.childNodes[0];
z = y.nodeValue;

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];
    var y = x.childNodes[0];
    document.getElementById("hello").innerHTML =
    y.nodeValue; 
}
</script>
 
</body>
</html>

Output:

Example: Looping through all the <title> elements:

<!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 x, i, attnode, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName('title');
    for (i = 0; i < x.length; i++) { 
        txt += x[i].childNodes[0].nodeValue + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
 
</body>
</html>

Output:

Get the Value of an Attribute:

Attributes in the DOM are nodes. But, attribute nodes have text values and are not like element nodes. We need to get the text value of an attribute to get the value of an attribute. For this, the getAttribute() method or the nodeValue property of the attribute node can be used.

Get an Attribute Value – getAttribute():

To get an attribute’s value, the getAttribute() method is used.

Example:

x = xmlDoc.getElementsByTagName("title")[0];
txt = x.getAttribute("lang");

Explanation:

In the above example, we are retrieving the text value of the “lang” attribute of the first <title> element.

Example: Looping through all the elements:

<!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 x, i, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("book");
    for (i = 0; i < x.length; i++) { 
        txt += x[i].getAttribute("category") + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
 
</body>
</html>

Explanation:

In the above example, we are looping through all the <book> elements and are retrieving their “category” attributes.

Get an Attribute Value – getAttributeNode():

To get an attribute node, the getAttributeNode() method is used.

Example:



Output:

Explanation:

In the above example, we are retrieving the text value of the “lang” attribute of the first <title> element.

Example: Looping through all the elements:

<!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 x, i, xmlDoc, txt;
    xmlDoc = xml.responseXML;
    txt = "";
    x = xmlDoc.getElementsByTagName("book");
    for (i = 0; i < x.length; i++) {
        txt += x[i].getAttributeNode("category").nodeValue + "<br>";
    }
    document.getElementById("hello").innerHTML = txt; 
}
</script>
</body>
</html>

Explanation:

In the above example, we are looping through all the <book> elements and are retrieving their “category” attributes.

Please Share