Scribd
Upload
139 views5 pages

Dom PDF

This document discusses the Document Object Model (DOM), which defines an application programming interface for HTML and XML documents. The DOM represents an HTML or XML document as nodes and objects that can be manipulated. JavaScript has a built-in DOM interface that allows JavaScript code to add, modify, or delete elements and content from the DOM tree. The document outlines DOM traversal and modification methods like getElementById() and appendChild(), and how events can be handled through the DOM.

Uploaded by

rida4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
139 views5 pages

Dom PDF

This document discusses the Document Object Model (DOM), which defines an application programming interface for HTML and XML documents. The DOM represents an HTML or XML document as nodes and objects that can be manipulated. JavaScript has a built-in DOM interface that allows JavaScript code to add, modify, or delete elements and content from the DOM tree. The document outlines DOM traversal and modification methods like getElementById() and appendChild(), and how events can be handled through the DOM.

Uploaded by

rida4
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Outline

„ What is DOM
„ Traversal and Modification
Lecture 4:
„ Events and Event Handling
Document Object Model
(DOM)
Wendy Liu
CSC309F – Fall 2007

1
2

Document Object Model (DOM) Language Binding


„ An defined application programming interface (API) „ A support language must have a binding to
between XHTML documents and application programs
„ An abstract model the DOM constructs
„ In fact, it is a collection of interfaces
„ Including one for each document tree node type „ Correspondence between constructs in the
„ Platform-neutral and language-neutral language and elements in the DOM
„ Support a variety of application programming languages
(JavaScript, C++, Java, VB) „ JavaScript binding
„ Can be used in programming to
„ Create documents, navigate the structure, and change/add/delete elements „ Elements of a document are objects
and their content
„ Documents in the DOM have a treelike structure „ Attributes are represented by properties
„ There can be more than one tree in a document (but is unusual)
„ W3C Standard (DOM 1, DOM 2)
„ Implementation is browser dependent
3 4

Example: Element Binding


function Element() {
// properties and methods of the Node object
...
// properties and methods of Element object
var tagName ;
Traversal and Modification
getAttribute = elementGetAttribute(name);
setAttribute = elementSetAttribute(name, value);
removeAttribute = elementRemoveAttribute(name); Window, Document, and Element
getAtrributeNode = elementGetAttributeNode(name);
setAtrributeNode = elementSetAttributeNode(newAttr);
...
}
6
5

1
DOM Representation of XML Window
<A> „ The Window object represents the window that
<B>text</B> displays the document
<C> „ Properties of the Window object are visible to all
JavaScript scripts that appear in the window’s XHTML
<D>child of C</D> Document
document
<E>another child of C</E> Element „ The Window object include all of the global variables as
</C> properties
<F>moreText</F> „ It is the unique global object which is created before
control enters any execution context
</A>
text moreText Text „ Has a self referential property: window

„ All JavaScript variables are properties of some


object
7 8

Document Element
„ Represent the displayed XHTML document „ Elements of a document are Element objects
„A central interface „ Can be used to
„ Create new elements and text nodes „ Navigate document
„ Change document tree structure

9 10

Identifying Existing Elements Caution: Inconsistency in the Book


<body>
<form name=“myForm”>
„ Sebesta P89 – first paragraph
<p><input type=“button” name=“turnItOn” id=“onButton”/></p> „ “(XHTML 1.1) form elements must still use the name attribute
<form> because it is used in processing form data.”
</body>
„ Location in tree „ Sebesta P194 – middle two paragraphs
„ document.forms[0].element[0] „ “…the XHTML 1.1 standard does not allow the name attribute in
„ ID the form element, even though the attribute is now legal for form
„ document.getElementById(“onButton”) elements.
… Although name attributes are not allowed on form elements,
„ Tag name name attributes are often required on the elements in a form.”
„ document.getElementsByTagName(“input”)
„ Returns a node list (could be empty) „ The official version ( W3C DOM 2 HTML Specification)
„ Attribute name „ “getElementsByName
„ document.getElementByName(“turnItOn”) With [HTML 4.01] documents, this method returns the (possibly
„ Discouraged in XHTML empty) collection of elements whose name value is given by
„ document.myForm.turnItOn elementName.
„ HTML usage; deprecated in XHTML In [XHTML 1.0] documents, this method only returns the
(possibly empty) collection of form controls with matching
name.”
11 12

2
Example: DOM Tree Modifying DOM
„ Node
„ appendChild(newChild)
„ Add node newChild to the end of child list
„ replaceChild(newChild, oldChild)
„ Replace node oldChild with newChild
<html xmlns="http://www.w3.org/ „ insertBefore(newChild, oldChild)
„ Insert node newChild in child list before node oldChild
1999/xhtml"> „ cloneNode(deep)
<head><title>Navigating DOM</title> „ Return a copy of the node including all descendents if deep==true
<script type"text/javascript">... „ removeChild(aChild)
„ Remove node aChild from child list including all descendents
</script>
„ (all methods in Node are available to Document and Element)
</head> „ Document
<body><h1>A Nice Table</h1> „ createElement(tagName)
<table id="mTable“ border="1"> „ Create an Element object of type tagName
<tr><td>1</td><td>2</td></tr> „ createTextNode(data)
„ Create a Text object with data
</table><form><input
„ Element
type="button"onclick="showDOM()" „ removeAttribute(name)
value="Print DOM" /> „ setAttribute(name, value)
</form></body></html> „ http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html
13 14

Example: Adding Table Rows

Events and Event Handling

16
15

Event-driven Programming Structured vs. Event Driven


“Most, if not all, GUI systems and toolkits are
designed to be event driven, meaning that the main
flow of your program is not sequential from Structured Program Event Driven Architecture
beginning to end.”
Robin Dunn
Speech at GUI programming at OSCON2004

“Hollywood Principle: "Don't call us; we'll call you."


... You implement the interfaces, you get registered.
You get called when the time is right.”
Dafydd Rees
http://c2.com/cgi/wiki?HollywoodPrinciple
17 18

3
Event-Driven Execution Partial List of Events
„ JavaScript programs are typically event-driven „ Clipboard
„ Execution can be triggered by events that „ oncopy, oncut, onpaste
occur on the Web page, usually as a result of „ Keyboard
user actions
„ onkeydown, onkeyup, onkeypress
„ onclick,ondblclick, onkeydown, onload,
onmouseover, onsubmit, onresize, … „ Mouse
„ Events are associated with XHTML tag „ onmousedown, onmouseup, onmousemove
attributes „ Other
„ The onclick event can be associated with <a> „ onfocus, onblur, load, unload
and form <input> tags
19 20

Registering Event Handlers DOM 2 Event Model


„ By assigning the event handler script to an „ Modularized interface
event tag attribute „ HTMLEvents
„ <a id=“myLink” href=“…” „ abort, blur, change, error, focus, load
onmouseover=“popup();”>…</a> „ MouseEvents

„ By assigning the event handler script to an „ click, mousedown, mousemove, mouseover


event property of an object „ Support event propagation
„ document.getElementById( „ Notavailable in DOM 0 (i.e. HTML event
“myLink”).onmouseover = popup; model)

21 22

Event Propagation Example: Event Propagation


„ Basic flow
„ Capturing phase
„ The process by which an event can be handled by one of the event's
target's ancestors before being handled by the event's target
„ Capture operates from the top of the tree, generally the Document,
dispatching the event downward to the target node
„ At target
„ When the event reaches the target, any event listeners registered on the
EventTarget are triggered
„ Bubbling phase
„ The process by which an event propagates upward through its ancestors
after being handled by the event's target
„ Bubbling events will then trigger any additional event listeners found by
following the EventTarget's parent chain upward, until Document
„ Some events are non-bubbling: load, unload
„ Cancel further propagation
„ Event.stopPropagation();
„ Can be used in the capture and bubbling phase
23 24

4
Changing Style Attributes Example: Move Image on Screen
„ CSS1 and CSS-P (CSS - Positioning) are scriptable
from JavaScript
„ Allow dynamic style update on XHTML elements
„ The style property
„ position „ zIndex
„ top „ The effect of the 3rd dimension
„ left
„ The largest value is on the top

„ visibility

„ backgroundColor

„ color

25 26

Tracking Mouse Movements Slow Movement of Element


„ Window methods
„ setTimeout
„ setTimeout(“move()”, 20);
„ Delays for 20 ms before move() is called
„ setInterval
„ setInterval(“move()”, 20);
„ Cause move() to be repeatedly executed at 20 ms intervals

„ Track mouse position on screen


„ Drag and drop ball on click
„ Events onmousemove and onclick
27 28

You might also like