As you write more sophisticated Javascript, you may find that you have a need to traverse the DOM tree or to dynamically create elements on the DOM -- where DOM stands for document object model.

Douglas Crockford, who has brought you the beginning and advanced Javascript lectures, also lectures on the theory of the DOM below...

Part 1:

Douglas Crockford starts with the history of the browser and then gets into the theory of the document object model. He goes into tips on how to add Javascript to your pages using the script tag. He does not recommend the use of document.write.

He goes over these useful functions: document.getElementById(id), document.getElementsByName(name), node.getElementsByTagName(tagName). document and document.documentElement and documenet.body can give you access to the DOM nodes. One inconvenience is that IE and FireFox can give you different trees depending on whether spaces in the HTML are interpreted as nodes or not.

He shows us how to walk the DOM recursively. Since there is not get element by classname, walking the DOM is useful.

Part 2:

In this second part, he talks about manipulating elements the old school way of assignments and the new school way of using setAttribute and getAttribute. Ways to change styles: node.className, node.style.stylename. Note Javascript stylename is not always the same as the CSS name. Examples: CSS has "background-color"; Javascript style is "backgroundColor". CSS is "font-size"; Javascript style is "fontSize". and so on.

If you want to get an element style: document.defaultView().getComputedStyle(node, "").getPropertyValue(stylename); You can make elements by ... document.createElement(tagName) document.createTextNode(text) node.cloneNode() And then connect it to the DOM by ... node.appendChild(new) node.insertBefore(new, sibling) node.replaceChild(new, old) old.parentNode.replaceChild(new, old)

 

To remove elements ... node.removeChild(old) old.parentNode.removeChild(old) Three ways of adding event handlers... node["on"+type] = f; Microsoft: node.attachEvent("on"+type, f); W3C: node.addEventListener(type, f, false);

Part 3:

He explains in this section why it is important to detach any event handlers before removing the node or when using innerHTML. He shows some code as to how to do this.

He does not recommend the use of alert function in AJAX applications because it blocks the tread.

He covers some functions for inter-window communications.

Three ways to help with cross-browser issues:

• Browser Detection (not recommended because browser agent does not always tells the truth)
• Feature Detection (This is a better way and he shows some code)
• Platform Libraries (This is the best way. For example, YUI)

 

He talks about what he calls the "cracks in the DOM", the "wall", and the "holes".