Introduction to DOM The Document Object Model (DOM) is the model that describes how all elements in an HTML page, like input fields, images, paragraphs etc., are related to the topmost structure: the document itself. By calling the element by its proper DOM name, we can influence it. The purpose of the DOM: –It has been developed by the W3C to provide any programming language with access to each part of an XML document. What are the nodes of DOMnodes How you can walk the DOM tree from node to nodewalk the DOM tree How to get a specific node and how to change its value or attributes.getchange How to create nodes yourself, the ultimate purpose of the new DOM.create nodes
What are the nodes of DOMnodes In the Level 1 DOM, each object, whatever it may be exactly, is a Node. So if you do This is a paragraph you have created two nodes: an element P and a text node with content 'This is a paragraph'. The text node is inside the element, so it is considered a child node of the element. Conversely, the element is considered the parent node of the text node. If you do This is a paragraph the element node P has two children, one of which has a child of its own: The element node P also has its own parent, this is usually the document, sometimes another element like a DIV. So the whole HTML document can be seen as a tree consisting of a lot of nodes, most of them having child nodes (and these, too, can have children).
DOM tree structure
Walking through the DOM tree Knowing the exact structure of the DOM tree, you can walk through it in search of the element you want to influence. For instance, assume the element node P has been stored in the variable x Then if we want to access the BODY we do x.parentNode We take the parent node of x and do something with it. To reach the B node: x.childNodes childNodes is an array that contains all children of the node x. Of course numbering starts at zero, so childNodes is the text node 'This is a' and childNodes is the element node B. –Two special cases: x.firstChild accesses the first child of x (the text node), while x.lastChild accesses the last child of x (the element node B). So supposing the P is the first child of the body, which in turn is the first child of the document, you can reach the element node B by either of these commands: document.firstChild.firstChild.lastChild; document.firstChild.childNodes.lastChild; document.firstChild.childNodes.childNodes;
Formatting with CSS AJAX Foundations: CSS Product Name Airplane Big car
Communicating between Windows Getting and using a window reference A new window has been opened and moved to the background. Bring it forward Put it backward
Messing with the DOM in other Windows Image Remote
slide_show_main.html Remote Image Swapping
An example for Loops and Arrays(slide show) URL Slideshow
Functions(Timer.html) Function with No Parameters time!