document object model. lecture 18 the document object model (dom) is not a programming language it...

23
Document Object Model

Post on 18-Dec-2015

225 views

Category:

Documents


3 download

TRANSCRIPT

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

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