www.ccc.commnet.edu

Download Report

Transcript www.ccc.commnet.edu 

Manipulating the DOM
CST 200 – JavaScript
3 – 4 - 13
Objectives
• Learn how to work with the Document Object
Model (DOM)
• Learn about the various arrays stored within
the Document object
• Work with the document.images[] Array
• Use the document.getElementById()
function
• Work with the innerHTML property
2
Document Object Model
• The Document Object Model (DOM) is a
hierarchy of objects that represent the web
browser, the web page document and web
page elements
• The DOM provides programmatic access to
different aspects of the Web browser window
and Web page
3
Document Object Model
4
Document Object Model (cont)
• Objects in the Document Object Model (DOM)
are created automatically by the web browser
when the web browser opens a page
• The top-level object is the Window object,
which represents the browser window
5
Window Object
• The Window object represents a Web
browser window
• The Window object is called the global
object because all other DOM objects are
contained inside of it
• We've used the Window object to display
pop-up boxes to the user
window.alert(msg);
6
The Document Object
• The Document object represents the Web
page displayed in a browser
• The Document objects contains all the Web
page elements
– Each web page element is further represented as
its own object
• We've used the Document object to write
information to the web page
document.write(msg);
7
Document Object Arrays
• The Document object contains arrays to store
and organize specific html elements
• Each array stores a specific category of html
elements
• These arrays include:
–
–
–
–
–
–
anchors[ ]
applets[ ]
forms[ ]
elements[ ]
images[ ]
links[ ]
the images[ ] array
stores Image objects
corresponding to each <img>
element
8
Accessing DOM Objects
Consider the page below, containing one
<h2> element and three <img>
elements:
<body>
<h2>Letters</h2>
<img src="A.jpg" alt="A" />
<img src="B.jpg" alt="B" />
<img src="C.jpg" alt="C" />
</body>
9
Accessing DOM Objects (cont)
• When the web browser loads the page,
each a new Image object will be created
to represent each <img> element
• The document.images[] array will
store all of the Image objects
document.images[0]
document.images[1]
document.images[2]
10
Accessing DOM Objects (cont)
• The first element of the
document.images[] array is an
Image object
document.images[0]
• This Image object has properties and
methods that can be accessed
11
Accessing Object Properties
• Once identifying a specific object, we can
then access specific properties
• document.images[0]
is the first Image object
• We can access properties of the
image, such as
src = "A.jpg"
document.images[0].src
document.images[0].width
document.images[0].height
height = 240
width = 240
12
Web Console Exercise #1
• Open the following page in Firefox:
http://www.capitalcc.edu/faculty/sfreeman/cst200/dom/letters.html
• Enter the following expressions into Web
Console. What does each statement return?
document.images[0]
document.images[0].src
document.images[0].width
document.images[0].border
document.images[1]
document.images[1].height
13
Accessing DOM Objects (cont)
• Another way of accessing DOM objects is by
assigning the name attribute to html elements
• Below we set the name attribute to the images:
<img src="A.jpg" name="imgA" alt="A"/>
<img src="B.jpg" name="imgB" alt="B"/>
<img src="C.jpg" name="imgC" alt="C"/>
14
Accessing DOM Objects (cont)
Elements can then be referenced by
adding the name following a period(.),
following the document object
document.imgA
document.imgB
document.imgC
15
Accessing DOM Objects (cont)
Using the DOM, we can access the same
Image object, in two different ways:
Through the element's name:
document.imgA
or through the images[ ] array
document.images[0]
16
Modifying Object Properties
• We can also modify the object properties by
assigning a new value to a property
// set a new file as the image src
document.images[0].src = "newA.jpg";
// set a new image width
document.images[0].width = 500;
// set a new border width
document.imgA.border = 5;
// hide image by changing the css display
// property
document.imgA.style.display="none"
17
Web Console Exercise #2
• Return to the letters.html web page in Web
Console
• Enter the following statements into Web Console.
What does each statement do?
document.imgA.src = "B.jpg"
document.imgA.width = 50
document.imgA.width = 350
document.imgA.border = 15
document.imgA.src = "A.jpg"
document.imgB.style.display = "none"
18
Accessing DOM Object - Exercise
• Assume the following page:
<html>
<body>
<h2>Welcome Guests</h2>
<img src="porch.jpg" name="homePorch"/>
<p>Guests can check in anytime after 8pm</p>
<img src="creek.jpg" name="creek"/>
</body>
</html>
• Write down how to access the creek Image object
through the images[ ] array and through the element
name.
19
Accessing JavaScript Objects (cont)
• So far, we have accessed objects through the
Document object and images[] array
• When referring to the current object, another way of
accessing an object is through the this keyword
– The this keyword refers to the current object
• Example:
<img src="creek.jpg" alt="shallow creek"
onclick="window.alert('This image is located
at the following URL: ' + this.src );" />
20
Accessing JavaScript Objects (cont)
• Using the this keyword, we can easily manipulate
the current object
<img src="A.jpg" alt="A"
onmousedown="this.src='B.jpg'"
onmouseup="this.src='A.jpg'" />
<img src="B.jpg" alt="B"
onmouseover="this.border=20"
onmouseout="this.border=0" />
21
getElementById() function
• We've seen two ways of accessing a DOM
object through the document array and with
the name attribute value
• Another way of accessing a specific DOM
object is with the
document.getElementById()
function
JavaScript, Fifth Edition
22
getElementById() function (cont)
• The document.getElementById( )
function returns a DOM object based on the id
attribute
– In order to use this function, the html element
must have been assigned an id attribute
JavaScript, Fifth Edition
23
getElementById() example
Example: imagine in our html document we
defined the following element:
<img src="boy.jpg" name="john" id = "john" />
We can then use the JavaScript expression:
document.getElementById("john")
to access the DOM object representing the
element
JavaScript, Fifth Edition
24
getElementById() example #2
<body>
<h1 id="top">Intro</h1>
<div id="main" >
<p id="welcome" >
Welcome to the …
</p>
</div>
<div id="footer">
</div>
</body>
document.getElementById("top")
document.getElementById("welcome")
document.getElementById("main")
document.getElementById("footer")
JavaScript, Fifth Edition
25
Web Console Exercise #3
• Return to the letters.html web page in Web
Console
• Enter the following statements into Web Console.
What does each statement do?
document.getElementById("letters")
document.getElementById("summary")
document.getElementById("img5")
document.getElementById("img5").width
26
innerHTML property
• Each html element has an innerHTML
property that can be used to change the
content of the html element
• Setting the innerHTML property to a value,
will update the content of the html element
• We will use innerHTML in conjunction with
document.getElementById()
JavaScript, Fifth Edition
27
innerHTML property (cont)
Example: imagine in our html document we
defined the following element:
<p id="welcome" >Welcome to Bill’s Auto</p>
We can then use the JavaScript expression:
document.getElementById("welcome").innerHTML
to access the content of the paragraph element
JavaScript, Fifth Edition
28
Web Console Exercise #3
• Return to the letters.html web page in Web
Console
• Enter the following statements into Web Console.
What does each statement do?
document.getElementById("summary").innerHTML=
“Welcome to Letters Page”
document.getElementById("contact").innerHTML=
“Contact Us “
29
Summary
• Document object model (DOM) is a hierarchy
of objects representing web page elements
• Document object represents the web page,
and contains all web page elements
• Document object contains arrays that can be
used to identify Web page elements
• JavaScript can reference any Web page
element through the DOM
JavaScript, Fifth Edition
30