XML DOM
What is XML DOM
DOM is an acronym stands for Document
Object Model. It defines a standard way to
access and manipulate documents. The
Document Object Model (DOM) is a
programming API for HTML and XML
documents. It defines the logical structure
of documents and the way a document is
accessed and manipulated.
As a W3C specification, one important
objective for the Document Object Model is
to provide a standard programming interface
that can be used in a wide variety of
environments and applications. The
Document Object Model can be used with
any programming language.
XML DOM defines a standard way to access
and manipulate XML documents.
What does XML DOM
The XML DOM makes a tree-structure view
for an XML document.
We can access all elements through the
DOM tree.
We can modify or delete their content and
also create new elements. The elements,
their content (text and attributes) are all
known as nodes.
For example, consider this table, taken from
an HTML document:
1. <TABLE>
2. <ROWS>
3. <TR>
4. <TD>A</TD>
5. <TD>B</TD>
6. </TR>
7. <TR>
8. <TD>C</TD>
9. <TD>D</TD>
10. </TR>
11. </ROWS>
12. </TABLE>
The Document Object Model represents this
table like this:
XML DOM Example : Load XML
File
Let's take an example to show how an XML
document ("note.xml") is parsed into an
XML DOM object.
This example parses an XML document
(note.xml) into an XML DOM object and
extracts information from it with JavaScript.
Let's see the XML file that contains
message.
note.xml
1. <?xml version="1.0" encoding="ISO-
8859-1"?>
2. <note>
3. <to>sonoojaiswal@javatpoint.com</to
>
4. <from>vimal@javatpoint.com</from>
5. <body>Hello XML DOM</body>
6. </note>
Let's see the HTML file that extracts the
data of XML document using DOM.
xmldom.html
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h1>Important Note</h1>
5. <div>
6. <b>To:</b> <span id="to"></span>
<br>
7. <b>From:</b> <span id="from">
</span><br>
8. <b>Message:
</b> <span id="message"></span>
9. </div>
10. <script>
11. if (window.XMLHttpRequest)
12. {// code for IE7+, Firefox, Chrome, Ope
ra, Safari
13. xmlhttp=new XMLHttpRequest();
14. }
15. else
16. {// code for IE6, IE5
17. xmlhttp=new ActiveXObject("Microso
ft.XMLHTTP");
18. }
19. xmlhttp.open("GET","note.xml",false);
20. xmlhttp.send();
21. xmlDoc=xmlhttp.responseXML;
22. document.getElementById("to").inner
HTML=
23. xmlDoc.getElementsByTagName("to")
[0].childNodes[0].nodeValue;
24. document.getElementById("from").inn
erHTML=
25. xmlDoc.getElementsByTagName("from
")[0].childNodes[0].nodeValue;
26. document.getElementById("message")
.innerHTML=
27. xmlDoc.getElementsByTagName("bod
y")[0].childNodes[0].nodeValue;
28. </script>
29. </body>
30. </html>
Test it Now
Output:
Important Note
To: sonoojaiswal@javatpoint.com
From: vimal@javatpoint.com
Message: Hello XML DOM
XML DOM Example : Load XML
String
This example parses an XML string into an
XM DOM object and then extracts some
information from it with a JavaScript.
Let's see the HTML file that extracts the
data of XML string using DOM.
xmldom.html
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h1>Important Note2</h1>
5. <div>
6. <b>To:</b> <span id="to"></span>
<br>
7. <b>From:</b> <span id="from">
</span><br>
8. <b>Message:
</b> <span id="message"></span>
9. </div>
10. <script>
11. txt1="<note>";
12. txt2="<to>Sania Mirza</to>";
13. txt3="
<from>Serena William</from>";
14. txt4="
<body>Don't forget me this weekend!
</body>";
15. txt5="</note>";
16. txt=txt1+txt2+txt3+txt4+txt5;
17.
18. if (window.DOMParser)
19. {
20. parser=new DOMParser();
21. xmlDoc=parser.parseFromString(txt,"
text/xml");
22. }
23. else // Internet Explorer
24. {
25. xmlDoc=new ActiveXObject("Microsof
t.XMLDOM");
26. xmlDoc.async=false;
27. xmlDoc.loadXML(txt);
28. }
29. document.getElementById("to").inner
HTML=
30. xmlDoc.getElementsByTagName("to")
[0].childNodes[0].nodeValue;
31. document.getElementById("from").inn
erHTML=
32. xmlDoc.getElementsByTagName("from
")[0].childNodes[0].nodeValue;
33. document.getElementById("message")
.innerHTML=
34. xmlDoc.getElementsByTagName("bod
y")[0].childNodes[0].nodeValue;
35. </script>
36. </body>
37. </html>
Test it Now
Output:
Important Note2
To: Sania Mirza
From: Serena William
Message: Don't forget me this weekend!
