| René Nyffenegger's collection of things on the web | |
|
René Nyffenegger on Oracle - Most wanted - Feedback
- Follow @renenyffenegger
|
Document Object Model (DOM) | ||
|
DOM (like SAX) is an API to process XML documents. It is specified by w3c. The definition of the API encompasses
methods to build, navigate, update and transform XML documents. DHTML uses DOM to dynamically
change HTML documents.
DOM creates a tree representation of an XML Document in memory. This is unlike SAX that triggers events.
DOM contrary to XPath not only allows navigating the document but also
changing it (nodes can be added, deleted, moved etx..).
Methods and properties of the Microsoft implementation of DOM:
MSXMLDOM
Demonstrating DOM with Java ScriptCreating a document
<html>
<head>
<title>Using DOM to create HTML</title>
<script>
function load_() {
var body = document.getElementsByTagName("body").item(0);
var title = document.createElement("H1");
title.appendChild(document.createTextNode("Some Title"));
var hello = document.createTextNode("Hello World");
var p = document.createElement("P");
p.appendChild(document.createTextNode("This is a"));
var bold = document.createElement("B");
bold.appendChild(document.createTextNode(" DOM "));
p.appendChild(bold);
p.appendChild(document.createTextNode("example"));
var table = document.createElement("TABLE");
var table_body = document.createElement("TBODY");
for (var x=0; x<10; x++) {
var row=document.createElement("TR");
for (var y=0; y<10; y++) {
var cell=document.createElement("TD");
cell.appendChild(document.createTextNode(x*y));
row.appendChild(cell);
}
table_body.appendChild(row);
}
table.appendChild(table_body);
body.appendChild(title);
body.appendChild(hello);
body.appendChild(p);
body.appendChild(table);
}
</script>
</head>
<body onload="load_()"> </body>
</html>
Traversing an xml document
Microsoft.XMLDOM makes it possible to traverse an XML Document recursively.
<html>
<head>
<title>Traversing a DOM Tree</title>
<script>
var NODE_ELEMENT = 1;
var NODE_ATTRIBUTE = 2;
var xmlDoc=new ActiveXObject("msxml2.DOMDocument.4.0");
function verify() {
if(xmlDoc.readyState!=4)
return false;
}
function traverse_recursively(node, w) {
if (node.nodeType == NODE_ELEMENT) {
w.document.write('<li><b>'+node.tagName+': </b>');
var attrs = node.attributes;
var attrs_length=attrs.length;
if (attrs_length) {
w.document.write("(");
var attrs_idx;
for (attrs_idx=0;attrs_idx<attrs_length;attrs_idx++) {
var attr=attrs[attrs_idx];
w.document.write(attr.name + "=" + attr.value);
if (attrs_idx < attrs_length - 1) {
w.document.write(", ");
}
}
w.document.write(")");
}
}
if(node.hasChildNodes()) {
w.document.write('<ul>');
for(var i=0; i<node.childNodes.length; i++)
traverse_recursively(node.childNodes(i), w);
w.document.write('</ul>');
}
else {
if (node.text.length > 0){
w.document.write('<li>')
w.document.write(node.text);
}
}
}
function traverse_xml() {
var w = window.open('opened_.html', '', 'toolbar=yes,scrollbars=yes,width=400,height=400,top=200,left=100');
xmlDoc.async="false";
xmlDoc.onreadystatechange=verify;
xmlDoc.loadXML(document.f.t.value);
if (xmlDoc.parseError.errorCode) {
var p = xmlDoc.parseError;
alert("Error\n" +
"Reason: " + p.reason + "\n" +
"Line: " + p.line /*+ " / " + p.linePos */)
return;
}
var doc=xmlDoc.documentElement;
w.document.write('<ul>');
traverse_recursively(doc, w);
w.document.write('</ul>');
return false;
}
</script>
<body>
<form name='f'>
<textarea name='t' style='width=500px;height=300px'></textarea>
<br><input type='button' value='Traverse XML' onClick='return traverse_xml();'>
</form>
</body>
</html>
Links |