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