Lecture7(B)

JavaScript DOM

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

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

3
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

11
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
12
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

13
 2. Document Object Model (DOM)…

Window

Navigator Document History Location

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

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

select list
s buttons
Textboxe
of forms
element
Array of

Reset

li
files

14
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”)

16
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”).hei
ght

17
2.1 Retrieving HTML elements…

Function starts

Getting
reference to pic

Accessing
Attribute
s
Setting id
Image tag

Calling function

18
 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

19
2.2 Retrieving the text of an element

Getting reference to
element

Getting text

Id of paragraph Calling the function

Paragraph text

20
 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”).get
Attribute(“src”)

21
2.3 Getting value of attributes

Getting reference to
element

Using getAttribute function

22
 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”)

23
2.4 Setting value of attributes

Setting Reference to element

Changing the
value of attribute

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

25
Reference
s • 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).