1 / 10

Introduction to the Document Object Model DOM

Introduction to the Document Object Model DOM. *Understand document structure manipulation *Dynamic effects in web pages *Programming, scripting, web content concepts. Window Document Body header. TAGS to OBJECTS. A document is read in by a browser.

ross
Download Presentation

Introduction to the Document Object Model DOM

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. Introduction to theDocument Object ModelDOM *Understand document structure manipulation *Dynamic effects in web pages *Programming, scripting, web content concepts

  2. Window Document Body header TAGS to OBJECTS A document is read in by a browser. The browser builds an object hierarchy of the document. Each tag is converted to an object. <html> <body> <h1> hello world<h1> <body> <html> Browser Objects are memory structures which have -properties =data values -methods = code the object can execute -event/handlers= respond to something done to the object -address = a means of identifying the object in the document

  3. Document Reference Problem <html> <head> <title> DOM Example </title> </head><body> <h1> hello world<h1> <p> this is an object to <a href=index.html> click</a> </p> </body> </html> OBJECT < Location | Content > How to specify where? How to specify what?

  4. html head body p title h1 a How to Specify Where? 1) By name or ID Example: <p ID=a_name> <html> <head> <title> DOM Example </title> </head><body> <h1> hello world</h1> <p> this is an object to <a href=index.html> click</a> </p> </body> </html> 2) Object Hierarchy <p ID=a_name>

  5. html head body p title h1 a Object Hierarchy Dot Notation .document elements Collections of specific elements .all[] .links[] .forms[] … Alternative Location specifications using collections. For example the <a> tag can be specified by All[6] - 6th element in “all” depth first search Document.links[0] - use the links collection

  6. DOM a Brief List .window .document .frame .all[] .links[] .forms[] .images[] .document .elements Document: Method -.write() Properties - .bgColor Elements: handler – onSubmit() Properties - .value .all[] refers to any tag , addresses by [occurrence number] or “ID” Properties- any style handler - onClick

  7. How to Specify What? Special content designations: innerText, innerHTML Properties: bgcolor, color <p> this is an object to <a href=index.html> click</a> Events: onclick

  8. DOMExample.html <html> <head><title>DOM Example</title></head> <body> <h1> hello world</h1> <h1 id= "line2" onclick="style.color='red'">Click on this text to change the color</h1> <h1 onclick="window.document.bgColor='blue'"> Click on this to change the background color</h1> <h1 onclick="window.document.all[4].style.color='green'"> Click on this to make hello world green</h1> <h1 onclick="line2.style.color='green'"> Click on this to make line2 green</h1> </body> </html>

  9. Document Object Model Tutorials Tutorials designed to increase your familiarity with the Document Object Models (DOMs) used by Netscape and Microsoft web browsers http://www.csctce.com/demos/dom_tutorial/ http://hotwired.lycos.com/webmonkey/97/32/index1a.html?tw=authoring http://www.w3schools.com/dhtml/dhtml_events.asp http://www.brainjar.com/dhtml/intro/default.asp The DOM is extensively described and used in Chapters 14 to 20 of Deitel “Internet and the World Wide Web How to Program” also see the first section of Java Script in Greenlaw

  10. More Events and Properties Event Handlers: ONMOUSEMOVE - fires when curser moves ONMOUSEOVER - Fires when curser moves over an element ONMOUSEOUT - Fires when curser leaves an object ONKEYDOWN - Fires when the user pushes a key ONCLICK – Fires when object is clicked Style Properties: In general if a style is dashed in CSS it is lowerCamelCased in the DOM JScript. So in CSS Text-Decoration:underline in DOM becomes textDecoration=‘underline’

More Related