1. 1 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Document Object Model (DOM) http://courses.washington.edu/info100/

2. 2 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington References »JavaScript, The Definitive Guide by David Flanagan. Publisher O'Reilly »W3C Document Object Model http://www.w3.org/DOM/ http://www.w3.org/2003/02/06-dom-support.html »Document Object Model in Mozilla http://www.mozilla.org/docs/dom/

3. 3 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington What is the DOM? Document Object Model »The Document Object Model, normally abbreviated to DOM, is the API through which JavaScript interacts with content within a website. JavaScript and the DOM are usually seen as a single entity since JavaScript is most commonly used for this purpose (interacting with content on the web).

4. 4 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington What is the DOM? The DOM creates an hierarchy corresponding to the structure of each web document. This hierarchy is made up of nodes. There are several different types of DOM nodes, the most important are 'Element', 'Text' and 'Document'.

5. 5 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington What is the DOM? »An 'Element' node represents an element within a page. So if you have a paragraph element (' ') then it can be accessed through the DOM as a node. »A 'Text' node represents all text (within elements) within a page. So if your paragraph has a bit of text in it can be directly accessed through the DOM. »The 'Document' node represents the entire document. (it's the root-node of the DOM hierarchy/tree). »Also note that element attributes are DOM nodes themselves.

6. Sample DOM Document An HTML Document This is a simple document. This is what the browser reads This is what the browser displays on screen.

7. Document "Sample DOM Document" "An HTML Document" "This is a" "simple" "document" This is a drawing of the model that the browser is working with for the page.

8. 8 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Why is this useful? Because we can access the model too! »the model is made available to scripts running in the browser, not just the browser itself A script can find things out about the state of the page A script can change things in response to events, including user requests

9. 9 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Accessing elements

10. 10 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Accessing elements

11. 11 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Accessing elements

12. 12 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Accessing elements

13. 13 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Accessing elements Document Object: Access an item by its name getElementsByTagName The 'getElementsByTagName' method returns a live node collection/list. It's similar to an array in that it has a length property. One important thing to note is these collections are "live" - if you add a new element to the DOM then the collection will update itself. Since it's an array-like object we can access each node via an index, from 0 to the total length of the collection (minus 1):

14. 14 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Traversing the DOM The term "traverse" is used to describe the action of travelling through the DOM, finding nodes. The DOM API gives us plenty of node properties which we can use to move up and down through all the nodes within a document. These properties are inherent of all nodes and enable you to access related/close nodes:

15. 15 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Node.childNodes: You can use this to access all direct child nodes of a single element. It will be an array-like object, which you can loop through. Nodes within this array will include all the different node types including text nodes and other element nodes. Node.firstChild: This is the same as accessing the first item in the 'childNodes' array ('Element.childNodes[0]'). It's just a shortcut. Node.lastChild: This is the same as accessing the last item in the 'childNodes' array ('Element.childNodes[Element.childNodes.length-1]'). It's just a shortcut.

16. 16 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Node.parentNode: This gives you access to the parent node of your current node. There will only ever be one parent node. In order to access the grandparent you would simply use 'Node.parentNode.parentNode' etc. Node.nextSibling: This gives you access to the next node on the same level within the DOM tree. Node.previousSibling: This gives you access to the last node on the same level within the DOM tree.

17. 17 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington

18. Some information from a document DOM Sample 1 Information about this document. document.write(" Title: ",document.title); document.write(" Referrer: ",document.referrer); document.write(" Domain: ",document.domain); document.write(" URL: ",document.URL);

19. Some information about elements DOM Sample B function showInfo() { var element = document.getElementById("opener"); var buffer = element.id + " tag is " + element.tagName; alert(buffer); element = document.getElementById("actionItem"); buffer = element.id + " tag is " + element.tagName; buffer += ", type is "+element.type; alert(buffer); } The id attribute is very helpful. This is the closing paragraph. Show Info

21. 21 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington document.getElementById("radioLC").checked checked »This is a particular property of the node we are looking at, in this case, a radio button »Each type of node has its own set of properties for radio button: checked, name,... refer to the HTML DOM for specifics for each element type »Some properties can be both read and set

22. 22 The Information School of the University of Washington Nov 1fit100-16-dom © 2006 University of Washington Getting vs. Setting var oldvalue = document.getElementById("resultField").value; document.getElementById("resultField").value = "new value";

23. DOM Sample 3 var switchCount = 0; var adjectives = ["simple","complex","fascinating","unique"]; function switcher() { if (switchCount == (adjectives.length - 1)) switchCount = 0; else switchCount++; var italicNode = document.getElementById("adjPhrase"); italicNode.firstChild.nodeValue = adjectives[switchCount]; } An HTML Document This is a simple document. switch This is what the browser reads (dom3.html).

24. This is what the browser displays on screen.