1 / 17

DHTML and DOM: Document Object Model

DHTML and DOM: Document Object Model. Web programming. We have seen: Client side programming Javascript. DHTML. Dynamic HTML Make web pages dynamic using client-side scripting Content and appearance can be altered in response to browser events Fast and efficient

ciaran-fry
Download Presentation

DHTML and DOM: 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. DHTML and DOM: Document Object Model

  2. Web programming • We have seen: • Client side programming • Javascript

  3. DHTML • Dynamic HTML • Make web pages dynamic using client-side scripting • Content and appearance can be altered in response to browser events • Fast and efficient • Typically it uses Javascript

  4. DHTML • Collection of server-side techniques to make pages dynamic

  5. Standard • Javascript • CSS • DOM: document object model

  6. DOM • Standard from W3C • API: application programming interface • Standard to manipulate HTML and XML documents supported by most browsers

  7. DOM objects • Represent different aspects of the document: • Windows • Documents • Elements • Attributes • Texts • Events • Style sheets, etc.

  8. DOM tree • In order to manipulate the HTML document, it is seen as a tree • A tree has nodes • Some nodes are parents, • Parents have children

  9. DOM • It is possible to create, destroy, or change any node in the DOM tree using Javascript • This means that any part of the HTML document can be changed dynamically • Remember the styles are also part of the tree so the appearance of anything can be changed too

  10. DOM standard • Is a recommendation from W3C (starting in 1997) • So all html agents can use the same standard object oriented interface to HTML and XML documents • But not everything has been standardized, so be careful with things that may be browser dependent

  11. DOM API • Is the interface between the objects implemented by the browser and Javascript • Each browser may implement an object differently as long as the interface and the functionality comply with the standard

  12. DOM node interface • The properties of a node include information about • Itself (e.g node type) • The related nodes: • Parent, siblings, children

  13. DOM tree traversal • From any node it is possible to traverse the rest of the tree (i.e. move to other node trees)

  14. DOM Objects • have data and methods

  15. HTMLElement data • tagName - read only • style - style object. e.g. element.style.backgroundColor • innerHTML - read/write - represents HTML source code inside the element

  16. HTMLElement methods • getAttribute(attrName) • setAttribute(attrName, value) • removeAttribute(attrName) • hasAttribute(attrName)

  17. HTML input control elements (eg buttons) • Name and value • focus() - get input focus • blur() - lose input focus • select() - selects current textual content for editing or copying • click()

More Related