Latest web development tutorials

XML DOM

DOM (Document Object Model Document Object Model) defines a standard way to access and manipulate the document.


XML DOM

XML DOM (XML Document Object Model) defines a standard method for accessing and manipulating XML documents.

XML DOM XML document as a tree view.

All elements can be accessed through the DOM tree. You can modify or delete their contents, and to create new elements. Elements, their text, and their properties, are considered to be a node.

In our XML DOM tutorial , you can learn more about the XML DOM.


HTML DOM

HTML DOM defines a standard way for accessing and manipulating HTML documents.

All HTML elements can be accessed via the HTML DOM.

In our HTML DOM tutorial , you can learn more about HTML DOM knowledge. .


Loading an XML file - cross-browser instance

The following example XML document ( " note.xml ") to parse XML DOM object, and then to extract some information via JavaScript:

Examples

<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"


Important Note!

For from the top of the XML file ( "note.xml") of <to> element extracts the text "Tove", the syntax is:

getElementsByTagName("to")[0].childNodes[0].nodeValue

Note that even XML file contains only one <to> element, you must still specify the array index [0]. This is because the getElementsByTagName () method returns an array.


Loading an XML string - Cross-browser instance

The following examples of the XML string parsing the XML DOM object, and then to extract some information via JavaScript:

Examples

<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"