1 the document object model sams teach yourself javascript in 24 hours (fourth edition) michael...
TRANSCRIPT
1
The Document Object Model
SAMS Teach Yourself JavaScript in 24 Hours (Fourth Edition)Michael Moncur
SAMS Publishing 2007
2
Objectives
You will be able to: Describe the structure of the W3C
Document Object Model, or DOM.
Use JavaScript to access DOM objects.
Dynamically modify page content with JavaScript using the DOM API.
3
The DOM
Modern browsers hold everything that you see on a page in an elaborate data structure. The Document Object Model Similar to the XML Document Object
Model
You can access the contents from a JavaScript script. Add new content. Modify and delete content sent by the server.
4
The DOM The DOM consists of a hierarchy of
JavaScript objects corresponding to the HTML tags that were sent to the browser by the server. Tree structure. "window" object is the root. Everything else is contained in an object
included, at some level, in the window. Parent-child relationship. Reflects the containment relationships in
the HTML. We can access any object from its parent.
5
The DOM API
The objects that make up the DOM have public methods and properties.
Define an API that scripts can use to interact with the user and modify page content.
6
The window Object
When a script is running on a browser, there is always a current window object.
The window contains a document object.
The document object contains everything we see on the page.
window.document refers to the document object of the current window.
A global name, always available.
7
The window Object
We can refer to the methods and properties of the current window directly without saying "window."
Examples: alert('Hello!'); means window.alert('Hello!');
document.write('xxx'); means window.document.write('xxx');
8
Some Properties of window.document
document.URL document.title document.referrer document.lastModified document.bgColor document.fgColor
9
Example: Accessing the DOM
In Visual Studio, create a new Empty Web Site. DOM_Demo
10
Add HTML Page
11
Add test.html
12
Accessing a document Property
13
Accessing a document Property
14
Accessing Other document Properties
Let's add some more content.
<p>
This document was last modified on:
<script language="JavaScript" type="text/javascript">
document.write(document.lastModified + "<br />");
document.write("Its title is " + document.title + "<br />");
document.write("And its URL is " + document.URL + "<br />");
</script>
</p>
15
Accessing Other document Properties
16
document.write
document.write only works correctly as the page is being loaded The script is executed as the
browser loads the page. The function argument appears at
that point in the rendered page.
17
Examine the DOM
Add an HTML page to the website. simple.html
Delete the <!DOCTYPE ... > and the xmlns.
Keeping the page as simple as possible.
Add a heading and a paragraphas shown on the next slide.
18
A Simple HTML Page
19
DOM Representation
Each box in the diagram represents a DOM node.
The boxes above the bottom row correspond to elements.The boxes in the bottom row are text nodes (not elements).
20
Terminology: Elements vs Nodes
An element in the DOM corresponds to a start-tag end-tag pair and everything contained within them.
Elements can contain other, smaller, elements in a parent-child relationship.
Every element is a node in the DOM tree structure, but there are other kinds of nodes as well.
21
Nodes
Nodes are the most basic objects in the DOM.
The DOM consists of a tree of nodes.
Kinds of nodes: Elements
Defined by begin-end tag pairs Example: <body> ... </body>
Attributes Defined inside begin tags Example: <img src="images/USF_Bull" alt="USF Bull />
Text Nodes Just text Example: This is a heading
22
Elements vs. Nodes
Only elements can have children.
Attribute nodes and text nodes are always children of element nodes. Cannot have child nodes of their own. No other node can be included in an
attribute node or a text node.
23
Nodes
JavaScript code can navigate the DOM by following links to child nodes, parent nodes, and sibling nodes. Script can add, modify, and delete nodes.
Easier way: assign unique IDs to nodes that we want to act on. Script can then access the node by its ID.
24
Enable Script Debugging
We will use the Visual Studio JavaScript Debugger to examine the DOM. Requires IE as browser
Enable script debugging in your browser. Tools > Internet Options
Advanced tab Browsing
Uncheck “Disable Script Debugging (Internet Explorer)”
25
Enable Script Debugging
26
hello.js
Add a JScript file, hello.js
Permit us to use the Visual Studio debugger to examine the DOM.
function say_hello()
{
alert('Hello');
doc = window.document;
}
27
Add the Script to the HTML Page
<html>
<head>
<title>A Simple HTML Document</title>
<script language="Javascript" type="text/javascript"
src="hello.js"></script>
</head>
<body onload="say_hello();" >
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
28
Set a Breakpoint
Try it!
29
Breakpoint HitRight click on doc and select Quickwatch
30
Explore the Document
End of Section
31
Manipulating Page Content with JavaScript
Now let's look at how we can manipulate the page content with JavaScript using the DOM API.
Let the user move an object around on the screen by clicking buttons.
Hide an object and make it reappear Modify text Change text to an image. Drag and drop.
32
Positioning Content with JavaScript
Teach Yourself JavaScript in 24 Hours (Fourth Edition), pages 213 – 216
33
Positioning with JavaScript
Create a new empty web site. DOM_Positioning
Download to website folder and add to website: Water_Lilies.jpg animate.js positioning.html
Set positioning.html as start page.
http://www.cse.usf.edu/~turnerr/Web_Application_Design/Downloads/DOM_Positioning/
34
Website DOM Positioning
35
positioning.html<html>
<head>
<title>Positioning Elements with JavaScript</title>
<script language="javascript" type="text/javascript"
src="animate.js">
</script>
<style type="text/css">
#square {
position:absolute;
top: 200;
left: 100;
width: 200;
height: 200;
border: 2px solid black;
padding: 10px;
background-color: #E0E0E0;
}
</style>
</head>
Style for element with specified ID
positioning.html<body>
<h1>Positioning Elements</h1>
<hr />
<form name="form1 action="positioning.html" method="get">
<input type="button" name="left" value="<- Left"
onclick="pos(-1,0);" />
<input type="button" name="right" value="Right ->"
onclick="pos(1,0);" />
<input type="button" name="up" value="Up"
onclick="pos(0,-1);" />
<input type="button" name="down" value="Down"
onclick="pos(0,1);" />
<input type="button" name="hide" value="Hide"
onclick="hideSquare();" />
<input type="button" name="show" value="Show"
onclick="showSquare();" />
</form>
<hr />
<div id="square" >
This square is an absolutely positioned
layer that you can move using the buttons above.
</div>
</body>
</html>
animate.jsvar x=100,y=200;
function pos(dx, dy) {
var sq;
if (!document.getElementById) return;
x += 10*dx;
y += 10*dy;
sq = document.getElementById("square");
sq.style.top = y;
sq.style.left = x;
}
function hideSquare() {
var sq;
if (!document.getElementById) return;
sq = document.getElementById("square");
sq.style.display = "none";
}
function showSquare() {
var sq;
if (!document.getElementById) return;
sq = document.getElementById("square");
sq.style.display="block";
}
38
Try it!
39
Set a Breakpoint
Use QuickWatch to examine element “square”
40
The Square in the DOM
Scroll down to id.
41
The Square in the DOM
Scroll down and expand Style
42
The Square in the DOM
Scroll down.
43
The Square in the DOM
One of the values that we set in animate.js.
Single step to end of function pos and then examine top again.
44
sq.style.top
45
The DOM API
Node Properties nodeName
Not the same as ID. Contents of < > -- p, body, etc. tagName in QuickWatch
nodeType 1 for normal nodes 3 for text nodes 9 for the document node
nodeValue – Text nodes only The text contained in the node
46
Node Properties
innerHTML The HTML inside the node. Can be set as well as retrieved.
innerText innerHTML without the HTML markup
outerHTML The HTML that defines the node
47
innerHTML
48
outerHTML
49
Node Relationship Properties
firstChild lastChild childNodes (Array) previousSibling nextSibling
Can be viewed in QuickWatch JavaScript code can use these
properties to navigate in the DOM.
50
sq.firstChild
51
More DOM API
Document Methods getElementById (id ) getElementsByTagName (tag ) createTextNode (text ) createElement ( tag )
52
Node Methods
appendChild(new ) InsertBefore (new, old ) replaceChild (new, old ) removeChild (node ) hasChildNodes() cloneNode();
JavaScript code can use these methods to examine and modify the DOM.
53
Example: Modify Existing Text
Add a button to DOM_Positioning
When button is clicked, the script will modify the text shown inside the box.
54
Modify Existing Text
Add to animate.js:
function modifySquareText()
{
if (!document.getElementById) return;
var sq = document.getElementById("square");
sq.firstChild.nodeValue =
"New text inside the box";
}
55
Add Button to positioning.html
...
<input type="button" name="show" value="Show"
onClick="showSquare();" />
<input type="button" name="modify" value="Modify"
onclick="modifySquareText();" />
</form>
Build and run.
56
positioning.html with New Modify Button
57
After Modify is Clicked
Note that the original buttons still work normally.
58
Replacing a Node
Let’s modify the Modify button’s function to replace the text node in “square” with an image.
function modifySquareText() {
if (!document.getElementById) return;
var sq = document.getElementById("square");
var img = document.createElement('<img src="Water_Lilies.jpg">');
sq.replaceChild(img, sq.firstChild);
}
Comment out the original version .
59
After Modify is Clicked
60
Adding Text to a Page
Let’s let the user add new text to the movable square.
Add an input box to the form.
When the user clicks “Modify” create a new text node containing the user’s input and add it to the square.
61
The New Input Box
In positioning.html, just before the end of the form, add:
<br />
<input type="text" id="input_box" size="65" />
<br />
62
positioning.html with New Input Box
63
Modify Function modifySquareText()
function modifySquareText() {
if (!document.getElementById) return;
var new_text = document.form1.input_box.value;
var new_node = document.createTextNode (" " + new_text);
var sq = document.getElementById("square");
sq.appendChild(new_node);
document.form1.input_box.value="";
}
Comment out previous version.
64
New Version of positioning.html
User input
65
After Modify Clicked
66
The Square is Still Movable
67
Changing the Page Heading
While we are at it, let’s let the modify button modify the heading as well.
The title “Positioning Elements” is the only <h1> tag on the page.
Use this as an opportunity to demonstrate getElementsByTagName
68
Function updateHeading()
function updateHeading()
{
if (!document.getElementsByTagName) return;
var headings = document.getElementsByTagName("h1");
var pageHeading = headings[0];
pageHeading.firstChild.nodeValue =
"Square text has been modified";
}
Add call to updateHeading at the end of function modifySquareText().
69
New Version of positioning.html
70
New Version of positioning.html
End of Section
71
Let the User Drag and Drop the Square
We can handle MouseDown, MouseMove, and MouseUp events in order to implement drag and drop in JavaScript.
Note: This is a simple example. In a real app we would do something in response to the drag and drop rather than just moving the object on the screen.
72
Drag and Drop
Add a new JScript file to the website:
drag_and_drop.js
New <script> tag in positioning.html head:
<script language="javascript" type="text/javascript"
src="drag_and_drop.js">
</script>
73
Browser Differences
Different browsers use different properties for the cursor position on MouseMove: pageX, pageY clientX, clientY
Try one. If it doesn't exist, try the other.
74
Drag and Drop in Progress
Apps typically provide feedback to the user indicating that a drag and drop operation is in progress.
Let's make the border red while the square is being dragged.
75
drag_and_drop.js
var dx, dy;
// Set up when the page loads
window.onload = Setup;
function Setup() {
if (!document.getElementById) return;
var sq = document.getElementById("square");
// Set event handler
sq.onmousedown = Start_Drag;
}
Note alternative to <body onload="Setup();">
Avoid cluttering the HTML!
function Start_Drag(e) {
var mouse_x, mouse_y;
if (!e) var e = window.event; // Accomodate different browsers
if (e.pageX) {
mouse_x = e.pageX;
mouse_y = e.pageY;
} else if (e.clientX) {
mouse_x = e.clientX;
mouse_y = e.clientY;
} else return; // No browser support
var sq = document.getElementById("square");
sq.style.borderColor = "Red";
// Calculate distances from mouse position to square.
dx = mouse_x - sq.offsetLeft;
dy = mouse_y - sq.offsetTop;
// Set event handlers
sq.onmousemove = Move;
sq.onmouseup = Drop;
sq.onmousedown = null;
}
function Move(e) {
var mouse_x, mouse_y;
// Track mouse movements
if (!e) var e = window.event;
if (e.pageX) {
mouse_x = e.pageX;
mouse_y = e.pageY;
} else if (e.clientX) {
mouse_x = e.clientX;
mouse_y = e.clientY;
} else return;
// Update position of the square
x = mouse_x - dx;
y = mouse_y - dy;
var sq = document.getElementById("square");
sq.style.left = x;
sq.style.top = y;
}
function Drop() {
var sq = document.getElementById("square");
sq.style.borderColor = "black";
// Update event handlers
sq.onmousemove = null;
sq.onmouseup = null;
sq.onmousedown = Start_Drag;
}
Try it!
79
Mouse Down
80
Drag
81
Mouse Up
82
Other Browsers
Chrome
83
Other Browsers
Firefox
84
Assignment
Try these examples for yourself.
Experiment with different browsers.
85
References
Official documentation on the DOM can be found on the W3C website:
http://www.w3.org/DOM/DOMTR#dom3 Exhaustive, but difficult to understand and use.
Some more accessible resource: w3schools javaScript and HTML DOM Reference
http://www.w3schools.com/jsref/
Mozilla DeveloperNetwork Gecko DOM Referencehttps://developer.mozilla.org/en/Gecko_DOM_Reference
quirksmode DOM Tutorialhttp://www.quirksmode.org/dom/intro.html