XML DOM
A DOM (Document Object Model) defines a standard way for accessing and
manipulating documents.
The XML DOM
The XML DOM defines a
standard way for accessing and manipulating XML documents.
The XML DOM views an XML document as a tree-structure.
All
elements can be accessed through the DOM tree. Their content (text and
attributes) can be modified or
deleted, and new elements can be created. The elements, their
text, and their attributes are all known as nodes.
You can learn more about the XML DOM in our XML DOM
tutorial.
The HTML DOM
The HTML DOM defines a
standard way for accessing and manipulating HTML documents.
All
HTML elements can be accessed through the HTML DOM.
You can learn more about the HTML DOM in our
JavaScript tutorial.
Load an XML File - Cross-browser Example
The following example parses an XML document ("note.xml")
into an XML DOM object and then extracts some info from it with a JavaScript:
Example
<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<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","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Try it yourself »
Important Note!
To extract the text "Tove" from the <to> element in the XML file
above ("note.xml"), the syntax is:
getElementsByTagName("to")[0].childNodes[0].nodeValue
Notice that even if the XML file contains
only ONE <to> element you still have to specify the array index [0]. This
is because the getElementsByTagName() method returns an array.
Load an XML String - Cross-browser Example
The following example parses an XML string into an XML DOM object and then
extracts some info from it with a JavaScript:
Example
<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<script>
txt="<note>";
txt=txt+"<to>Tove</to>";
txt=txt+"<from>Jani</from>";
txt=txt+"<heading>Reminder</heading>";
txt=txt+"<body>Don't forget me this weekend!</body>";
txt=txt+"</note>";
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Try it yourself »
Color Picker