INFT132 093 07 Document Object Model

INFT11/71-132
Web Applications

Document Object Model
Dr Michael Rees
School of Information Technology

mrees@bond.edu.au

HTML Document Object Model

• The DOM is an abstract model that defines the interface
between HTML documents and application programs—an API

• Documents in the DOM have a tree structure (see Firebug/IE8)

• A language that supports the DOM must have a binding to the
DOM constructs

• In the JavaScript binding, HTML elements are represented as
objects

• Element attributes are represented as properties:
– <input type = "text" name = "address"> is represented as
an object with two properties, type and name, with the
values ―text" and "address"
© 2009 Michael Rees Web Applications 2

HTML Document Object Model

• A standard object model for HTML
• A standard applications programming interface (API) for
HTML
• Platform- and language-independent
• A W3C standard
• The HTML DOM defines the objects and properties of all
HTML elements, the methods (interface) to access them,
and the events generated
• In other words: a standard for how to get, change, add, or
delete HTML elements

JavaScript Execution Environment

• DOM window object represents the browser window
which displays documents

• All global variables are properties of window

• Implicitly defined window properties:
– document displays page content
– frames: an array of frame object


Document Properties

• forms: an array of references to the forms of the
document, and each form
– elements array, which references the form’s elements

• anchors array of named link positions

• links array of <a> tags

• images array of <img> tags


DOM Nodes
<html> • The entire document is a document node
<head> • Every HTML element is an element node
<title>My title</title> • The text in the HTML elements are text nodes
</head> • Every HTML attribute is an attribute node
<body> • Comments are comment nodes
<h1>My header</h1>
<a href="url">My link</a>
</body>
</html>


Parents, Children, Siblings
• In a node tree, the top
node is called the root
• Every node, except the
root, has exactly one
parent node
• A node can have any
number of children
• A leaf is a node with no
children
• Siblings are nodes with the
same parent

DOM Node Properties

Some of the common properties:

• x.innerHTML - the text value of x

• x.nodeName - the name of x

• x.nodeValue - the value of x

• x.parentNode - the parent node of x

• x.childNodes - the child nodes of x

• x.attributes - the attributes nodes of x


DOM Methods

Some DOM methods:

• document.getElementById(id) - get the element with a
specified id

• document.getElementsByTagName(name) - get all
elements with a specified tag name

• x.appendChild(node) - insert a child node to x

• x.removeChild(node) - remove a child node from x


Example

<body>

<p id="intro">Hello World!</p>

<script type="text/javascript">

var introNode = document.getElementById("intro");
document.write(introNode.firstChild.nodeValue);

</script>
<body>

Change Node Value

<body>

<p id="p1">Hello World!</p>


document.getElementById("p1").innerHTML = "New text!";

</script>

</body>


Functions and Events Example
<head>
function Change () {
document.getElementById("p1").innerHTML = "New text!";
document.body.style.backgroundColor = "lavender";
document.getElementById("p1").style.color = ―red";
document.getElementById("p1").style.fontFamily =― Arial";
}
</script>
</head>
<body>
<h1 id="p1">Hello world!</h1>
<input type="button" onclick="Change()" value="Change" />
</body>


Events and Event Handling
• An event is a notification that an action has occurred, either with the
browser or performed by the user
• When the event occurs an event object is created
• An event handler is a script that is executed in response to the appearance
of an event
• The process of connecting an event handler to an event is called registration
• Event examples:
– A mouse click
– A web page or an image loading completely
– Mousing over a hot spot on the web page
– Selecting an input box in an HTML form
– Submitting an HTML form
– A keystroke


Events and Tag Attributes
Event Tag Attribute Event Tag Attribute
blur onlblur mousedown onmousedown
change onchange mousemove onmousemove
click onclick mouseout onmouseout
dblclick ondblclick mouseover onmouseover
focus onfocus reset onreset
keydown onkeydown select onselect
keypress onkeypress submit onsubmit
keyup onkeyup unload onunload
load onload

W3Schools Event Reference

DOM 2 Event Model

• So far the DOM 0 and 1 event models were described

• DOM 2 Event Model:
– event handlers (listeners) associated with nodes
– multiple handlers for same event allowed on single node
– event object created at the target node in the DOM
– capture phase starts at root and descends to target
triggering event handlers on the way
– any listener on target node triggered
– bubble phase works way up tree to root again triggering
handlers on the way
– any handler can stop further propagation


Reading

• Read Chapter 5 of the textbook


INFT132 093 07 Document Object Model

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à INFT132 093 07 Document Object Model

Similaire à INFT132 093 07 Document Object Model (20)

Plus de Michael Rees

Plus de Michael Rees (20)

Dernier

Dernier (20)

INFT132 093 07 Document Object Model