• 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 Corehttp://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
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
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 nodeinterface 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
• AttributesDoctype implementation documentElement
• MethodscreateElement(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
<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>
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<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>
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
<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>