XML DOM
The DOM (Document Object Model) defines a standard way for accessing and
manipulating documents.
The XML DOM
The XML DOM (XML Document Object Model) defines a
standard way for accessing and manipulating XML documents.
The DOM views XML documents 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.
In the examples below we use the following DOM reference to get the text from the
<to> element:
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue
- xmlDoc - the XML document created by the parser.
- getElementsByTagName("to")[0] - the first <to> element
- childNodes[0] - the first child of the <to> element (the text
node)
- nodeValue - the value of the node (the text itself)
You can learn more about the XML DOM in our XML DOM
tutorial.
The HTML DOM
The HTML DOM (HTML Document Object Model) defines a
standard way for accessing and manipulating HTML documents.
All
HTML elements can be accessed through the HTML DOM.
In the examples below we use the following DOM reference to change the text of
the HTML element where id="to":
document.getElementById("to").innerHTML=
- document - the HTML document
- getElementById("to") - the HTML element where id="to"
- innerHTML - the inner text of the HTML element
You can learn more about the HTML DOM in our HTML
DOM tutorial.
Load an XML File - A Cross browser Example
The following code loads an XML document ("note.xml") into the XML parser:
Example
<html>
<body>
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
<script type="text/javascript">
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest()
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
xhttp.open("GET","note.xml",false);
xhttp.send("");
xmlDoc=xhttp.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 "Jani" from the XML, the syntax is:
| getElementsByTagName("from")[0].childNodes[0].nodeValue |
In the XML example there is
only one <from> tag, but you still have to specify the array index [0], because
the XML parser method getElementsByTagName() returns an array of all <from>
nodes.
Load an XML String - A Cross browser Example
The following code loads and parses an XML string:
Example
<html>
<body>
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span></p>
<script>
text="<note>";
text=text+"<to>Tove</to>";
text=text+"<from>Jani</from>";
text=text+"<heading>Reminder</heading>";
text=text+"<body>Don't forget me this weekend!</body>";
text=text+"</note>";
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(text,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(text);
}
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 »
|
Note: Internet Explorer uses the loadXML() method to parse an XML
string, while other browsers use the DOMParser object.
Make your web applications look like a million bucks
|
|
Most web applications today use boring methods to present data to their viewers using grids or simple HTML tables. FusionCharts induces "life" into the web applications by converting monotonous data into lively charts, gauges & maps.
FusionCharts works with all technologies like ASP, ASP.NET, PHP, ColdFusion, Ruby on Rails, JSP, HTML pages etc.
and connects to any database to render animated & interactive charts. It takes less than 15 minutes and no expertise
whatsoever to build your first chart and just a glance of it to captivate your audience. This fact is endorsed by our
12,000 customers and 150,000 users which include a majority of the Fortune 500 companies.
And yeah, your applications could look like a million bucks by spending just $69.
So go ahead, download your
copy of FusionCharts and start "wow-ing" your customers now!
|
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
