seemingly random and unorgainzed bits of information
6.08.2006
Data Binding with Ajax Part 1 – Understanding the DOM!
Unlike C# or Java, the HTML form components were not originally designed for desktop-like programming models. It does not have the rich set of built-in data models used for data binding that are found in components provided by these traditional languages. However, what JavaScript provides is the Document Object Model (DOM) which is a structured (tree) representation of all the elements that represents an XML document (HTML being an XML doc included).
The document object model for this simple web page is illustrated below. Notice that each tag (element) is a node in the DOM tree. The attributes of each element are also represented in the tree.
<html>
<script>
function updateParagraph() {
// use convenient DOM to loacate element by ID
var pTag = document.getElementById('paragraphTag');
//programmatically change the <p> element
pTag.style.backgroundColor="blue";
pTag.style.color="white";
pTag.style.fontWeight="bold";
// remove existing <p> tag child which is the text (see dom tree).
pTag.removeChild(obj.lastChild);
//now, add the new TEXT to the <p> element
var msg = document.getElementById('name').value + ", this is a DOM Example!"
pTag.appendChild(document.createTextNode(msg));
}
</script>
<head><title>A Document</title></head>
<body bgcolor="yellow">
<h1>Document Heading</h1>
<p id='paragraphTag' style="color:red">This is a paragraph tag.</p>
<form>
Enter Name:
<input id="name" size="30"/>
<button value="Click Me" onclick="updateParagraph();"/>
</form>
</body>
</html>
DOM Tree:
root
|
+ html
|
+ script
| |
| + TEXT: function bindFormData(objId, data) { ...
| ...
+ head
| |
| + title
| |
| + TEXT: A Document
|
+ body
|
+ ATT: bgcolor=yellow
|
+ h1
| |
| + TEXT: Document Heading
|
+ p
| |
| + ATT: style=color:red;font-weight:bold
| |
| + TEXT: This is a paragraph tag.
|
+ form
|
+ TEXT: Enter Name
|
+ input
| |
| + ATT: id=name
| |
| + ATT:size=30
|
+ button
|
+ ATT: value=Click Me
|
+ ATT: onclick=updateParagraph()
DOM Navigation
Using the DOM API developers can traverse (query) and modify node values in the DOM tree. So component declared in the HTML page at design-time can programmatically updated at run-time using the DOM API. Also, using the DOM API, programmers can programmatically add new elements to the DOM tree (at run-time) that was not declared at design-time. One can build entire page programmatically without any prior existence of an HTML page.
In this sample HTML page above, we use the document.getElementById() to locate the node using the node's id value. This one way of quickly locating a node on the DOM. You can iteratively traverse the tree nodes one by one until you locate a specific node using a loop construct. In future blogs, I will explore how to construct more complicated structures such as tables.
References
http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html – JavaScript DOM
http://developer.mozilla.org/en/docs/Gecko_DOM_Reference:Examples#998263 – Examples
http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html – DOM from W3C
