What is the DOM?
The Document Object Model (DOM) defines a standard for accessing and manipulating documents:
The HTML DOM defines a standard way for accessing and manipulating HTML documents. It presents an HTML document as a tree-structure.
The XML DOM defines a standard way for accessing and manipulating XML documents. It presents an XML document as a tree-structure.
The HTML DOM
All HTML elements can be accessed through the HTML DOM.
This example changes the value of an HTML element with id="demo":
<h1 id="demo">This is a Heading</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello World!'">Click Me!
</button>
The XML DOM
All XML elements can be accessed through the XML DOM.
book.xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>
This code retrieves the text value of the first <title> element in an XML document:
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
The XML DOM is a standard for how to get, change, add, and delete XML elements.
his example loads a text string into an XML DOM object, and extracts the info from it with JavaScript:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var parser, xmlDoc;
var text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script></body>
</html>
Comments
Post a Comment