Manipulating the DOM

Manipulating the DOMCST 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

4

Document Object Model

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

8

the images[ ] arraystores Image objects

corresponding to each <img> element

Accessing DOM ObjectsConsider 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 asdocument.images[0].srcdocument.images[0].widthdocument.images[0].height

12

src = "A.jpg"

width = 240

height = 240

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].srcdocument.images[0].widthdocument.images[0].borderdocument.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[ ] arraydocument.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 widthdocument.images[0].width = 500;// set a new border widthdocument.imgA.border = 5;// hide image by changing the css display // propertydocument.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:

20

<img src="creek.jpg" alt="shallow creek" onclick="window.alert('This image is located at the following URL: ' + this.src );" />

Accessing JavaScript Objects (cont)• Using the this keyword, we can easily manipulate

the current object

21

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

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


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


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("main")

document.getElementById("welcome")

document.getElementById("footer")




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


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





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


Manipulating the DOM

Documents

Transcript of Manipulating the DOM