XML DOM Advanced
XML DOM - Advanced
In the earlier chapters of this tutorial, we introduced the XML DOM and used the getElementsByTagName() method of the XML DOM to extract data from an XML document to retrieve data.
In this chapter we will combine some other important XML DOM methods.
You can learn more about XML DOM in our XML DOM tutorial.
Get the value of the element
The XML file used in the following example: books.xml.
The following example retrieves the text value of the first <title> element:
Example
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view the online instance
Get the value of the attribute
The following instance retrieves the first The text value of the "lang" attribute of a <title> element:
Example
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
document.write(txt);
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
Change the value of the element
The following example changes the value of the first <title> element Text value:
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
document.write(txt);
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Create new attributes
The setAttribute() method of XML DOM can be used to change existing attribute values, or create a new attribute.
The following example creates a new attribute (edition="first") and then adds it to each <book> element:
Example
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
x=xmlDoc.getElementsByTagName("book");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("edition","first");
}
//Output all attribute values
for (i=0;i<x.length;i++)
{
document.write("Category: " + x[i].getAttribute('category') + "<br>");
document.write("Edition: " + x[i].getAttribute('edition') + "<br>");
}
</script>
</body>
</html>Run Instance»
Click the "Run Instance" button to view the online instance
Create Element
The createElement() method of XML DOM creates a new element node.
The createTextNode() method of XML DOM creates a new text node.
The appendChild() method of XML DOM adds a child node to a node (after the last child node).
To create a new element with text content, you need to create a new element node and a new text node at the same time, and then append it to the existing node.
The following example creates a new element (<edition>) with the following text: First, and then adds it to the first <book> element:
Example
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
newel=xmlDoc.createElement("edition");
newtext=xmlDoc.createTextNode("First");
newel.appendChild(newtext);
x=xmlDoc.getElementsByTagName("book");
x[0].appendChild(newel);
for (i=0;i<x[0].childNodes.length;i++)
{
if (x[0].childNodes[i].nodeType==1)
{
document.write(x[0].childNodes[i].nodeName);
document.write(": ");
document.write(x[0].childNodes[i].childNodes[0].nodeValue);
document.write("<br>");
}
}
</script>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
Instance explanation
Create an <edition> element
Create a text node with a value of "First"
Append this text node to the new <edition> element
Append the <edition> element to the first <book> element
Delete element
Instance
<!DOCTYPE html>
<html>
<body>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("book")[0];
document.write("Child nodes before removal: ");
document.write(x.childNodes.length);
x.removeChild(x.childNodes[0]);
document.write("<br>Child nodes after removal: ");
document.write(x.childNodes.length);
</script>
</body>
</html>Run instance»
Click the "Run instance" button to view online Example
Notes: The results of the above example may vary depending on the browser used. Firefox treats newline characters as empty text nodes, but Internet Explorer does not. You can read more about this problem and how to avoid it in our XML DOM tutorial.
