Books.xml:
<bookstore>
<book category="Child">
<title lang="en">ABC</title>
<author>Author Name</author>
<year>2020</year>
<price>29.99</price>
</book>
<book category="Internet">
<title lang="en">XQuery Book</title>
<author>Author 1</author>
<author>Author 2</author>
<year>2005</year>
<price>49.99</price>
</book>
</bookstore>
<bookstore>
<book category="Child">
<title lang="en">ABC</title>
<author>Author Name</author>
<year>2020</year>
<price>29.99</price>
</book>
<book category="Internet">
<title lang="en">XQuery Book</title>
<author>Author 1</author>
<author>Author 2</author>
<year>2005</year>
<price>49.99</price>
</book>
</bookstore>
ABC Author Name 2020 29.99 XQuery Book Author 1 Author 2 2005 49.99
Loading the XML Document:
To load the XML documents, we can use an XMLHttpRequest object. All modern browsers support it.
Example:
var xmlhttp = new XMLHttpRequest();
var xmlhttp = new XMLHttpRequest();
var xmlhttp = new XMLHttpRequest();
Selecting Nodes:
In different browsers, there are different ways of dealing with XPath.
Chrome, Firefox, Edge, Opera, and Safari:
They use the evaluate() method to select nodes.
Syntax:
xmlDoc.evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null);
xmlDoc.evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null);
xmlDoc.evaluate(xpath, xmlDoc, null, XPathResult.ANY_TYPE,null);
Internet Explorer:
It uses the selectNodes() method to select a node.
Syntax:
xmlDoc.selectNodes(xpath);
xmlDoc.selectNodes(xpath);
xmlDoc.selectNodes(xpath);
Select all the titles:
Example:
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book/title"
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book/title"
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
Output:
Explanation:
In the above example, we are selecting all the title nodes.
Select the title of the first book:
Example:
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[1]/title";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[1]/title";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
Output:
Explanation:
In the above example, we are selecting the title of the first book node under the bookstore element.
Select all the prices:
Example:
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book/price[text()]";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book/price[text()]";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
Output:
Explanation:
In the above example, we are selecting the text from all the price nodes.
Select price nodes with price>30.00:
Example:
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[price>30.00]/price";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[price>30.00]/price";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
Output:
Explanation:
In the above example, we are selecting all the price nodes with a price higher than 30.00.
Select price nodes with price<30.00:
Example:
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[price<30.00]/price";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[price<30.00]/price";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
Output:
Explanation:
In the above example, we are selecting all the price nodes with a price lower than 30.00.
Select title nodes with price<30.00:
Example:
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[price<30.00]/price";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[price<30.00]/price";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
Output:
Explanation:
In the above example, we are selecting all the title nodes with a price lower than 30.00.
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[price<30.00]/title";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>
<p id="hello"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
showResult(xhttp.responseXML);
}
};
xhttp.open("https://www.w3schools.blog/GET", "https://www.w3schools.blog/books.xml", true);
xhttp.send();
function showResult(xml) {
var txt = "";
path = "/bookstore/book[price<30.00]/title";
if (xml.evaluate) {
var nodes = xml.evaluate(path, xml, null, XPathResult.ANY_TYPE, null);
var result = nodes.iterateNext();
while (result) {
txt += result.childNodes[0].nodeValue + "<br>";
result = nodes.iterateNext();
}
// Code For Internet Explorer
} else if (window.ActiveXObject || xhttp.responseType == "msxml-document") {
xml.setProperty("SelectionLanguage", "XPath");
nodes = xml.selectNodes(path);
for (i = 0; i < nodes.length; i++) {
txt += nodes[i].childNodes[0].nodeValue + "<br>";
}
}
document.getElementById("hello").innerHTML = txt;
}
</script>