XML DOM
DOM (Document Object Model) defines a standard way for accessing and manipulating documents.
XML DOM
XML DOM (XML Document Object Model) defines a standard way for accessing and manipulating XML documents.
XML DOM views XML documents as a tree structure.
All elements can be accessed through the DOM tree. Their content can be modified or deleted, and new elements can be created. Elements, their text, and their attributes are all considered nodes.
In ourXML DOM Tutorial, you can learn more about XML DOM.
HTML DOM
HTML DOM defines a standard way for accessing and manipulating HTML documents.
All HTML elements can be accessed through the HTML DOM.
In ourHTML DOM Tutorial, you can learn more about HTML DOM.
Load an XML File - Cross-browser Example
The example below parses the XML document ("note.xml") into an XML DOM object, and then extracts some information via JavaScript:
Example
<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!
If you want to extract the text "Tove" from the <to> element of the XML file ("note.xml") above, the syntax is:
Note that even if the XML file contains only one <to> element, you must still specify the array index
Load an XML String - Cross-browser Example
The example below parses an XML string into an XML DOM object, and then extracts some information via JavaScript:
Example
<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 »
Other Extensions