1 / 85

The Document Object Model

The Document Object Model. SAMS Teach Yourself JavaScript in 24 Hours (Fourth Edition) Michael Moncur SAMS Publishing 2007. Objectives. You will be able to: Describe the structure of the W3C Document Object Model, or DOM. Use JavaScript to access DOM objects.

cid
Télécharger la présentation

The Document Object Model

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Document Object Model SAMS Teach Yourself JavaScript in 24 Hours (Fourth Edition) Michael Moncur SAMS Publishing 2007

  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. The DOM • Modern browsers hold everything that you see on a page in an elaborate data structure. • The Document Object Model • Similar to the XML Document Object Model • You can access the contents from a JavaScript script. • Add new content. • Modify and delete content sent by the server.

  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. The DOM API • The 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. 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. 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. Some Properties of window.document • document.URL • document.title • document.referrer • document.lastModified • document.bgColor • document.fgColor

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

  10. Add HTML Page

  11. Add test.html

  12. Accessing a document Property

  13. Accessing a document Property

  14. Accessing Other document Properties • Let's add some more content. <p> This document was last modified on: <script language="JavaScript" type="text/javascript"> document.write(document.lastModified + "<br />"); document.write("Its title is " + document.title + "<br />"); document.write("And its URL is " + document.URL + "<br />"); </script> </p>

  15. Accessing Other document Properties

  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. Examine the DOM • Add an HTML page to the website. • simple.html • Delete the <!DOCTYPE ... > and the xmlns. • Keeping the page as simple as possible. • Add a heading and a paragraph as shown on the next slide.

  18. A Simple HTML Page

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

  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. 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: <body> ... </body> • Attributes • Defined inside begin tags • Example: <img src="images/USF_Bull" alt="USF Bull /> • Text Nodes • Just text • Example: This is a heading

  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. 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. 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. Enable Script Debugging

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

  27. Add the Script to the HTML Page <html> <head> <title>A Simple HTML Document</title> <script language="Javascript" type="text/javascript" src="hello.js"></script> </head> <body onload="say_hello();"> <h1>This is a heading.</h1> <p>This is a paragraph.</p> </body> </html>

  28. Set a Breakpoint Try it!

  29. Breakpoint Hit Right click on doc and select Quickwatch

  30. Explore the Document End of Section

  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. • Drag and drop.

  32. Positioning Content with JavaScript • Teach Yourself JavaScript in 24 Hours (Fourth Edition), pages 213 – 216

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

  34. Website DOM Positioning

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

  36. positioning.html <body> <h1>Positioning Elements</h1> <hr /> <form name="form1 action="positioning.html" method="get"> <input type="button" name="left" value="<- Left" onclick="pos(-1,0);" /> <input type="button" name="right" value="Right ->" 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();" /> </form> <hr /> <div id="square"> This square is an absolutely positioned layer that you can move using the buttons above. </div> </body> </html>

  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. Try it!

  39. Set a Breakpoint Use QuickWatch to examine element “square”

  40. The Square in the DOM Scroll down to id.

  41. The Square in the DOM Scroll down and expand Style

  42. The Square in the DOM Scroll down.

  43. The Square in the DOM One of the values that we set in animate.js. Single step to end of function pos and then examine top again.

  44. sq.style.top

  45. The DOM API Node Properties • nodeName • Not the same as ID. • Contents of < > -- p, body, etc. • tagName in QuickWatch • nodeType • 1 for normal nodes • 3 for text nodes • 9 for the document node • nodeValue – Text nodes only • The text contained in the node

  46. Node Properties • innerHTML • The HTML inside the node. • Can be set as well as retrieved. • innerText • innerHTML without the HTML markup • outerHTML • The HTML that defines the node

  47. innerHTML

  48. outerHTML

  49. Node Relationship Properties • firstChild • lastChild • childNodes (Array) • previousSibling • nextSibling • Can be viewed in QuickWatch • JavaScript code can use these properties to navigate in the DOM.

  50. sq.firstChild

More Related