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:
<title lang="en">ABC</title>
<author>Author Name</author>
<title lang="en">XQuery Book</title>
<author>Author 1</author>
<author>Author 2</author>
<author>Author 3</author>
<author>Author 4</author>
<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:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("hello").innerHTML =
xmlDoc.documentElement.nodeName;
<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:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
function myFunction(xml) {
var xmlDoc = xml.responseXML;
var x = xmlDoc.getElementsByTagName("title")[0].childNodes[0];
document.getElementById("hello").innerHTML = x.nodeValue;
<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:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
function myFunction(xml) {
var xmlDoc = xml.responseXML;
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;
<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:
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:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("hello").innerHTML =
xmlDoc.documentElement.nodeName + "<br>" +
xmlDoc.documentElement.nodeType;
<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:
