Lecture 14

JavaScript DOM

Mr. Mubashir Ali

Lecturer (Dept. of Computer Science)
[email protected]
1
Summary of the previous lecture
• What is JavaScript?
• Embedding JavaScript with HTML
• JavaScript conventions
• Variables in JavaScript
• JavaScript operators
• Input output in JavaScript
• JavaScript functions
• Conditional Statements
• Looping Statements

Mubashir Ali - Lecturer (Department of

2
Computer Science).
Outline
• Dialog boxes in JavaScript
• HTML Document Object Model (DOM)

Mubashir Ali - Lecturer (Department of

3
Computer Science)
1. Dialog boxes in JavaScript
• JavaScript provides the ability to pickup user
input or display small amounts of text to the
user by using dialog boxes
• These dialog boxes appear as separate windows
and their content depends on the information
provided by the user
1.1 Alert Box
• An alert box is simply a small message box that
pops up and gives the user some information
• An alert dialog box is mostly used to give a
warning message to the users
• When an alert box pops up, the user will have to
click "OK" to proceed
• Syntax:
– alert(“message”)
1.1 Alert Box…

Start of the function

Displays an alert box

Calling the function

1.2 Prompt box
• A prompt box is often used if you want the user
to input a value before entering a page
• When a prompt box pops up, the user will have
to click either "OK" or "Cancel" to proceed after
entering an input value
• If the user clicks "OK" the box returns the input
value
• If the user clicks "Cancel" the box returns null
1.2 Prompt box…

Start of the function

Prompt box

Calling the function

1.3 Confirm box
• A confirm box is often used if you want the
user to verify or accept something
• When a confirm box pops up, the user will
have to click either "OK" or "Cancel" to
proceed
• If the user clicks "OK", the box returns true
• If the user clicks "Cancel", the box returns
false
1.3 Confirm box

User input

confirmation

Not confirmed
2. Document Object Model (DOM)
• Once html element are rendered (painted) in
the browser window, browser can not
recognize them
• To create interactive web pages it is vital that
the browser continues to recognize HTML
elements
• JavaScript enabled browsers do this because
they recognize and uses DOM

Mubashir Ali - Lecturer (Department of

11
Computer Science)
2. Document Object Model (DOM)…

• The HTML DOM defines a standard set of

objects for HTML, and a standard way to
access and manipulate HTML documents
• All HTML elements, along with their
containing text and attributes, can be
accessed through the DOM
– The contents can be modified or deleted, and
new elements can be created

Mubashir Ali - Lecturer (Department of

12
Computer Science)
2. Document Object Model (DOM)…

• The HTML DOM is platform and language

Independent
– It can be used by any programming language like
Java, JavaScript, and VBScript
• The HTML DOM can be thought of as a
hierarchy moving from the most general
object to the most specific

Mubashir Ali - Lecturer (Department of

13
Computer Science)
 2. Document Object Model (DOM)…

Window

Navigator Document History Location

Forms[ ] Images[] links[] anchors[]

Array of Array of Array of Array of
forms images links anchors
Options[]
Element[ ]

Textboxes

select list
of forms
element

buttons
Array of

Reset

li
files

Mubashir Ali - Lecturer (Department of

14
Computer Science)
2. Document Object Model (DOM)…

• document.forms[0].elements[0].value
• document.images[0].src
• document.links[0].href
2.1 Retrieving HTML elements
• The getElementById() method is a workhorse
method of the DOM
• It retrieves a specified element of the HTML
document and returns a reference to it
• To retrieve an element, it must have an
unique id
– document.getElementById(“element-id”)

Mubashir Ali - Lecturer (Department of

16
Computer Science)
2.1 Retrieving HTML elements…
• The returned reference can be used to
retrieve element attributes
– document.getElementById(“element-
id”).attribute
– document.getElementById(“pic”).src
– document.getElementById(“pic”).height

Mubashir Ali - Lecturer (Department of

17
Computer Science)
2.1 Retrieving HTML elements…

Function starts

Getting
reference to pic

Accessing
Attributes

Setting id
Image tag

Calling function
Mubashir Ali - Lecturer (Department of
18
Computer Science)
 2.2 Retrieving the text of an element

• innerHTML property defines both the HTML

code and the text that occurs between that
element's opening and closing
– document.getElementById(“element-id”).innerHTML

Mubashir Ali - Lecturer (Department of

19
Computer Science)
2.2 Retrieving the text of an element

Getting reference to
element

Getting text

Id of paragraph Calling the function

Paragraph text

Mubashir Ali - Lecturer (Department of

20
Computer Science)
 2.3 Getting value of attributes
• getAttribute() method is used to retrieve values
of attributes
– document.getElementById(“element-
id”).getAttribute(“attribute-name”)
– document.getElementById(“pic”).getAttribute(“src”)

Mubashir Ali - Lecturer (Department of

21
Computer Science)
2.3 Getting value of attributes

Getting reference to
element

Using getAttribute function

Mubashir Ali - Lecturer (Department of

22
Computer Science)
 2.4 Setting value of attributes
• setAttribute() method is used to set values of
attributes
– document.getElementById(“element-
id”).setAttribute(“attribute-name”, ”Value”)
– document.getElementById(“pic”).setAttribute(“src”,
”abc.jpg”)

Mubashir Ali - Lecturer (Department of

23
Computer Science)
2.4 Setting value of attributes

Setting Reference to element

Changing the
value of attribute

Mubashir Ali - Lecturer (Department of

24
Computer Science)
 Summary
• Dialog boxes in JavaScript
• HTML DOM
• Retrieving HTML elements
• Setting HTML elements

Mubashir Ali - Lecturer (Department of

25
Computer Science)
References
• Chapter 11. Beginning HTML,
XHTML,CSS, and JavaScript, by Jon
Duckett, Wiley Publishing; 2009, ISBN:
978-0-470-54070-1.
• Chapter 3,6, Learn JavaScript, by Chuck
Easttom, Wordware Publishing; 2002,
ISBN 1-55622-856-2

Mubashir Ali - Lecturer (Department of

26
Computer Science).