1. 1 The Document Object Model

2. 2 Objectives You will be able to: Describe the structure of the W3C Document Object Model, or DOM. Use JavaScript to access DOM objects. Dynamically modify page content with JavaScript using the DOM API.

3. 3 The DOM All modern browsers hold everything that you see on a page in an elaborate data structure. The Document Object Model You can access the contents from a JavaScript script. Add new content. Modify and delete content sent by the server.

4. 4 The DOM The DOM consists of a hierarchy of JavaScript objects corresponding to the HTML tags that were sent to the browser by the server. Tree structure. "window" object is the root. Everything else is contained in an object included, at some level, in the window. Parent-child relationship. Reflects the containment relationships in the HTML. We can access any object from its parent.

5. 5 The DOM API The JavaScript objects that make up the DOM have public methods and properties. Define an API that scripts can use to interact with the user and modify page content.

6. 6 The window Object When a script is running on a browser, there is always a current window object. The window contains a document object. The document object contains everything we see on the page. window.document refers to the document object of the current window. A global name, always available.

7. 7 The window Object We can refer to the methods and properties of the current window directly without saying "window." Examples: alert('Hello!'); means window.alert('Hello!'); document.write('xxx'); means window.document.write('xxx');

8. 8 Some Properties of window.document document.URL document.title document.referrer document.lastModified document.bgColor document.fgColor

9. 9 Example: Accessing the DOM In Visual Studio, create a new Empty Web Site. DOM_Demo

10. 10 Add HTML Page

11. 11 Add test.html

12. 12 Accessing a document Property

13. 13 Accessing a document Property

14. 14 Accessing Other document Properties Let's add some more content. This document was last modified on: document.write(document.lastModified + " "); document.write("Its title is " + document.title + " "); document.write("And its URL is " + document.URL + " ");

15. 15 Accessing Other document Properties

16. 16 document.write document.write only works correctly as the page is being loaded The script is executed as the browser loads the page. The function argument appears at that point in the rendered page.

17. 17 Examine the DOM Add an HTML page to the website. simple.htm l Delete the and the keeping the page as simple as possible. Add a heading and a paragraph as shown on the next slide. Set this as the starting page.

18. 18 A Simple HTML Page

19. 19 DOM Representation Each box in the diagram represents a DOM node. The boxes above the bottom row correspond to DOM elements. The boxes in the bottom row are text nodes (not elements).

20. 20 Terminology: Elements vs Nodes An element in the DOM corresponds to a start-tag end-tag pair and everything contained within them. Elements can contain other, smaller, elements in a parent-child relationship. Every element is a node in the DOM tree structure, but there are other kinds of nodes as well.

21. 21 Nodes Nodes are the most basic objects in the DOM. The DOM consists of a tree of nodes. Kinds of nodes: Elements Defined by begin-end tag pairs Example:... Attributes Defined inside begin tags Example: Text Nodes Just text Example: This is a heading

22. 22 Elements vs. Nodes Only elements can have children. Attribute nodes and text nodes are always children of element nodes. Cannot have child nodes of their own. No other node can be included in an attribute node or a text node.

23. 23 Nodes JavaScript code can navigate the DOM by following links to child nodes, parent nodes, and sibling nodes. Script can add, modify, and delete nodes. Easier way: assign unique IDs to nodes that we want to act on. Script can then access the node by its ID.

24. 24 Enable Script Debugging We will use the Visual Studio JavaScript Debugger to examine the DOM. Requires IE as browser Enable script debugging in your browser. Tools > Internet Options Advanced tab Browsing Uncheck “Disable Script Debugging (Internet Explorer)”

25. 25 Enable Script Debugging

26. 26 hello.js Add a JavaScript file, hello.js Permit us to use the Visual Studio debugger to examine the DOM. function say_hello() { alert('Hello'); doc = window.document; html = doc.firstChild; }

27. 27 Add the Script to the HTML Page A Simple HTML Document <script language="Javascript" type="text/javascript" src="hello.js"> This is a heading. This is a paragraph.

28. 28 Set a Breakpoint Try it!

29. 29 Breakpoint Hit Right click on html and select Quickwatch

30. 30 Explore the Document End of Section

31. 31 Manipulating Page Content with JavaScript Now let's look at how we can manipulate the page content with JavaScript using the DOM API. Let the user move an object around on the screen by clicking buttons. Hide an object and make it reappear Modify text Change text to an image.

32. 32 Positioning Content with JavaScript

33. 33 Positioning with JavaScript Create a new empty web site. DOM_Positioning Download and add to website: http://www.csee.usf.edu/~turnerr/Web_Application_Design/ Downloads/205_DOM/ http://www.csee.usf.edu/~turnerr/Web_Application_Design/ Downloads/205_DOM/ Water_Lilies.jpg animate.js positioning.html Set positioning.html as start page.

34. 34 Website DOM Positioning

35. 35 positioning.html Positioning Elements with JavaScript <script language="javascript" type="text/javascript" src="animate.js"> #square { position:absolute; top: 200px; left: 100px; width: 200px; height: 200px; border: 2px solid black; padding: 10px; background-color: #E0E0E0; } Style for element with specified ID

36. positioning.html Positioning Elements <input type="button" name="left" value="<- Left" onclick="pos(-1,0);" /> " onclick="pos(1,0);" /> <input type="button" name="up" value="Up" onclick="pos(0,-1);" /> <input type="button" name="down" value="Down" onclick="pos(0,1);" /> <input type="button" name="hide" value="Hide" onclick="hideSquare();" /> <input type="button" name="show" value="Show" onclick="showSquare();" /> This square is an absolutely positioned layer that you can move using the buttons above.

37. animate.js var x=100,y=200; function pos(dx, dy) { var sq; if (!document.getElementById) return; x += 10*dx; y += 10*dy; sq = document.getElementById("square"); sq.style.top = y; sq.style.left = x; } function hideSquare() { var sq; if (!document.getElementById) return; sq = document.getElementById("square"); sq.style.display = "none"; } function showSquare() { var sq; if (!document.getElementById) return; sq = document.getElementById("square"); sq.style.display="block"; }

38. 38 Try it!