1 / 23

Document Object Model

Document Object Model. Lecture 18. The Document Object Model (DOM) is not a programming language It is an object-oriented model of web documents Each web document is regarded as an instance of an object class, with attributes and Methods

ballard
Download Presentation

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. Document Object Model

  2. Lecture 18

  3. The Document Object Model (DOM) is not a programming language • It is an object-oriented model of web documents • Each web document is regarded as an instance of an object class, with • attributes and • Methods • Although the DOM is not a language, there can be several language bindings for it • in particular, there is a Javascript binding • That is, one can access the DOM from JavaScript

  4. DOM Level 0 • The DOM Level 0 is a name that is sometimes given to various object models that were used by different browsers before the W3C started to standardize the DOM • For example, there was a Netscape DOM, which was accessible through JavaScript • There was also a Microsoft DOM which was different in some respects from the Netscape DOM

  5. The W3C DOM • W3C DOM Level 1 (2 documents, Sept 2000) • DOM Level 1 Core http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html • DOM Level 1 HTML • W3C DOM Level 2 (4 documents, Nov 2000-2005) • DOM Level 2 Core • DOM Level 2 HTML • DOM Level 2 Events • DOM Level 2 Style • W3C DOM Level 3 (2 documents, 2001-2004) • DOM Level 3 Core • DOM Level 3 Events • DOM Level 3 Load and Save Specification • DOM Level 3 XPath Specification

  6. DOM Level 1 Corehttp://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html • This provides a set of core facilities for reading, writing and changing the contents of documents • The facilities apply equally well to HTML and XML • They are also intended to provide a basis for future web applications

  7. The Document node • This represents the entire document (XML or HTML). • Conceptually, it is the root of the document tree, and provides the primary access to the document's data.

  8. Formal spec for the Document node interface Document : Node { readonly attribute DocumentType doctype; readonly attribute DOMImplementation implementation; readonly attribute Element documentElement; Element createElement(in DOMString tagName) raises(DOMException); DocumentFragment createDocumentFragment(); Text createTextNode(in DOMString data); Comment createComment(in DOMString data); CDATASection createCDATASection(in DOMString data) raises(DOMException); ProcessingInstruction createProcessingInstruction(in DOMString target, in DOMString data) raises(DOMException); Attr createAttribute(in DOMString name) raises(DOMException); EntityReference createEntityReference(in DOMStringname) raises(DOMException); NodeList getElementsByTagName(in DOMString tagname); };

  9. Formal spec for the Document node • Thus, the Document node provides three attributes and nine methods • Attributes DoctypeimplementationdocumentElement • Methods createElement(in DOMString tagName) createDocumentFragment(); createTextNode(in DOMString data); createComment(in DOMString data); createCDATASection(in DOMString data) createProcessingInstruction(in DOMString target, in DOMString data) createAttribute(in DOMString name) createEntityReference(in DOMStringname) getElementsByTagName(in DOMString tagname);

  10. A simple HTML document <html> <head> <title>My Document</title> </head> <body> <h1>My first header</h1> <p>My first paragraph</p> <h1>My second header</h1> <p>My second paragraph</p> <p>My third paragraph</p> </body> </head>

  11. Counting the number of headers • Suppose we want to count the number of H1 headers in this document • We could use the getElementsByTagName()method, but this returns a NodeList so we need to know how to see how many members are in this list • We need the formal model for the NodeList

  12. Formal spec for the nodeList node interface NodeList { readonly attribute unsignedlonglength; Node item(in unsigned long index); }; • Thus, a NodeList has 1 attribute and 1 method • The attribute lengthis the number of nodes in the list • The method item() returns a node in the list

  13. An extended version of the document <html> <head> <title>My Document</title> <script type="text/javascript"> function report() {alert("There are"+ document.getElementsByTagName("h1").length+ " headers");} </script> </head> <body> <h1>My first header</h1> <p>My first paragraph</p> <h1>My second header</h1> <p>My second paragraph</p> <p>My third paragraph</p> <button onClick="report();">Click to get a report</button> </body> </head>

  14. Manipulating individual nodes • Each member of a nodeList is a Node • So, we need the formal model for a Node

  15. Formal spec for the Node node (part 1) interface Node { // NodeType const unsigned short ELEMENT_NODE = 1; const unsigned short ATTRIBUTE_NODE = 2; const unsigned short TEXT_NODE = 3; const unsigned short CDATA_SECTION_NODE = 4; const unsigned short ENTITY_REFERENCE_NODE = 5; const unsigned short ENTITY_NODE = 6; const unsigned short PROCESSING_INSTRUCTION_NODE = 7; const unsigned short COMMENT_NODE = 8; const unsigned short DOCUMENT_NODE = 9; const unsigned short DOCUMENT_TYPE_NODE = 10; const unsigned short DOCUMENT_FRAGMENT_NODE = 11; const unsigned short NOTATION_NODE = 12;

  16. Formal spec for the Node node (part 2) readonly attribute DOMString nodeName; attribute DOMString nodeValue; // raises(DOMException) on setting or retrieval readonly attribute Node parentNode; readonly attribute NodeList childNodes; readonly attribute Node firstChild; readonly attribute Node lastChild; readonly attribute Node previousSibling; readonly attribute Node nextSibling; readonly attribute NamedNodeMap attributes; readonly attribute Document ownerDocument; Node insertBefore(in Node newChild, in Node refChild) raises(DOMException); Node replaceChild(in Node newChild, in Node oldChild) raises(DOMException); Node removeChild(in Node oldChild) raises(DOMException); Node appendChild(in Node newChild) raises(DOMException); boolean hasChildNodes(); Node cloneNode(in boolean deep); };

  17. Attributes and methods of a Node node • There are eleven attributes: nodeTypenodeNamenodeValue parentNode childNodes firstChildlastChild previousSiblingnextSibling attributes ownerDocument • There are six methods: insertBefore(inNode newChild,in Node refChild) replaceChild(in Node newChild, in Node oldChild) removeChild(in Node oldChild) appendChild(in Node newChild) hasChildNodes(); cloneNode(in boolean deep);

  18. Inspecting the type of the last paragraph node <html> <head> <title>My Document</title> <script type="text/javascript"> function report() { alert(document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1).nodeType); } </script> </head> <body> <form> <button type="button" onClick=“report();">Show nodeType of last paragraph</button> </form> <h1>My first header</h1> <p>My first paragraph</p> <p>My second paragraph</p> <h1>My second header</h1> <p>My third paragraph</p> <p>My fourth paragraph</p> </body> </head>

  19. Inspecting the type of the last paragraph node (contd) • We have seen that the nodeType of the last paragraph node is 1, which means that it is an ELEMENT_NODE

More Related