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 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

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

The W3C DOM W3C DOM Level 1 (2 documents, Sept 2000) –DOM Level 1 Core –DOM Level 1 HTML W3C DOM Level 2 (4 documents, Nov ) –DOM Level 2 Core –DOM Level 2 HTML –DOM Level 2 Events –DOM Level 2 Style W3C DOM Level 3 (2 documents, ) –DOM Level 3 Core –DOM Level 3 Events –DOM Level 3 Load and Save Specification –DOM Level 3 XPath Specification

DOM Level 1 Core 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

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.

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 DOMString name) raises(DOMException); NodeList getElementsByTagName(in DOMString tagname); };

Formal spec for the Document node Thus, the Document node provides three attributes and nine methods Attributes Doctype implementation documentElement 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 DOMString name) getElementsByTagName(in DOMString tagname);

A simple HTML document My Document My first header My first paragraph My second header My second paragraph My third paragraph

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

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

An extended version of the document My Document function report() {alert("There are "+ document.getElementsByTagName("h1").length+ " headers"); } My first header My first paragraph My second header My second paragraph My third paragraph Click to get a report

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

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;

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); };

Attributes and methods of a Node node There are eleven attributes: nodeType nodeName nodeValue parentNode childNodes firstChild lastChild previousSibling nextSibling attributes ownerDocument There are six methods : insertBefore(in Node newChild, in Node refChild) replaceChild(in Node newChild, in Node oldChild) removeChild(in Node oldChild) appendChild(in Node newChild) hasChildNodes(); cloneNode(in boolean deep);

Inspecting the type of the last paragraph node My Document function report() { alert(document.getElementsByTagName("p"). item(document.getElementsByTagName("p").length-1).nodeType); } Show nodeType of last paragraph My first header My first paragraph My second paragraph My second header My third paragraph My fourth paragraph

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