Dynamic HTML
Making web pages interactive with
JavaScript
SE-2840
Dr. Mark L. Hornick
1
Part 1: The Browser Object
Model (BOM)
SE-2840
Dr. Mark L. Hornick
2
The BOM is a set of JavaScriptaccessible objects that comprise
various elements of a Browser

These are instances of classes defined by
the Browser

i.e. they are not native to Javascript like String,
Date, etc


That is, not part of the JavaScript core API objects
The BOM today has been standardized across
current versions of browsers

Until very recently different browsers implemented
BOM objects differently
SE-2840
Dr. Mark L. Hornick
3
window is the top-level object in the
BOM hierarchy
prompt(), and alert() are methods of the
browser’s window object
You can call alert either with:
window.alert(“Hello”);
Or just:
alert(“Hello”);
window is a global object, which means you
don’t need to use its name to access its
properties and methods
Also: every global variable and function you
define becomes part of the window object!
SE-2840
Dr. Mark L. Hornick
4
Some window methods and
attributes
Methods:





alert() – posts a message dialog
confirm("question") - returns true or false
prompt("question", "default") - returns a String
open() - open a new browser window
close() – close a window
Properties (attributes)




defaultStatus – text in status bar
name – name of the window
opener – window that created this window
outerwidth, outerheight – window extents
Note: The window object contains many other methods and properties for
various purposes – view them from within the browser debugger
SE-2840
Dr. Mark L. Hornick
5
Other BOM objects are children
of the window object
Note: This list is not complete
Represents information about the Browser and
the underlying OS
Information about the display capabilities of
the client PC running the Browser
Information on recently visited sites
Information on current URL
Represents the current web page – the DOM
SE-2840
Dr. Mark L. Hornick
6
Some navigator methods and
attributes

Methods:



javaEnabled() – returns true or false
Geolocation – new HTML5
Properties (attributes)





appCodeName – code name of the browser
appName - name of the browser
appVersion- platform and version of browser
cookieEnabled – true if cookies are enabled
userAgent – user-agent header sent to server
SE-2840
Dr. Mark L. Hornick
7
Some screen methods and
attributes

Methods:


none
Properties (attributes)




availHeight, availWidth, height, width – metrics of
display screen size
bufferDepth, colorDepth, pixelDepth – metrics of the
color palette
deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI number of dots per inch of the display screen
updateInterval – refresh interval
SE-2840
Dr. Mark L. Hornick
8
Some history methods and
attributes

Methods:




back() – loads the previous URL in the history list
forward() – loads the next URL in the history list
go() – loads specific page in the history list
Properties (attributes)

length – number of elements in the history list
SE-2840
Dr. Mark L. Hornick
9
Some location methods and
attributes

Methods:




assign() – loads a new document
reload() – reloads the current document
replace() – Replaces the current document with a new one
Properties (attributes)



host, hostname, href, pathname, port – hostname/port
number/path/port/URL information
protocol – protocol of the current URL
hash, search – URL from the hash sign/question mark
SE-2840
Dr. Mark L. Hornick
10
Main headaches with BOM
Differences between browsers



Implementations of respective BOM models and
the functions or attributes supported by the
respective objects
Each new release of IE or Firefox has new
features supported
Not every feature available in one browser will be
supported in the other
As of 2013, the info on this
page is obsolete!
Encouraging news:

IE and Firefox are complying with standards more
than ever
SE-2840
Dr. Mark L. Hornick
11
Part 2: The Document Object Model
Note: The Document Object Model (DOM)
is a child/subset of the BOM
SE-2840
Dr. Mark L. Hornick
12
The Document Object Model (DOM)
represents the objects that comprise
a web page document
What SE2811 pattern
Does this remind you of?
The hierarchical structure of the DOM below the
<body> element depends on the current web page
content
SE-2840
Dr. Mark L. Hornick
13
All nodes have relationships to
each other
document


Every node has a parent
except for the document
node
Most elements have
descendant nodes
html
head
body
title
Element node
p
My title
Here is an
em
word
Text node
Attribute node
emphasized
SE-2840
Dr. Mark L. Hornick
id=“par1”
id=“em1”
14
Looking closer at an Element object
within the <body>:
Text and Attribute descendents
<p id=“par1”> Here is an<em id=“em1”>emphasized</em> word</p>
Here is an emphasized word
p
Element
Here is an
em
emphasized
word
id=“par1”
Text
Attribute
id=“em1”
SE-2840
Dr. Mark L. Hornick
15
Each Element, Attribute, or Text fragment in
an HTML document is represented by a
corresponding object in the DOM hierarchy

The DOM objects are programmatically accessible via
Javascript
Element node

These objects are called nodes

Nodes can be dynamically
accessed, added,
deleted, or modified
Here is an
Note: There is also a
Comment node.
Text node
p
em
emphasized
SE-2840
Dr. Mark L. Hornick
Attribute node
word
id=“par1”
id=“em1”
16
The DOM implemented by modern
web browsers allows you to change
virtually anything on a webpage
<p id=“par1”> Here is an<em id=“em1”>emphasized</em> word</p>
Here is an emphasized word
p
Element
Here is an
em
emphasized
word
Text
id=“par1”
Attribute
id=“em1”
Every element of a webpage can be accessed as a DOM object
SE-2840
Dr. Mark L. Hornick
17
Some document methods and attributes for
accessing various subnodes

document Methods:







getElementById(id) – gets the Element in the document with a specified id
getElementsByTagName(tagName) – gets a collection of Elements with the
specified tag name (e.g. “h1”)
getElementsByClassName(className) – gets a collection of Elements with the
specified class name (e.g. “highlights”)
getElementByName() – gets a collection of Elements with the specified name (ex
of named element: <form name=“form1"><input type="text"></form> )
querySelectorAll() – gets a collection of Elements with the specified selector
pattern (e.g. “p em”)
querySelector() – gets the first Element with the specified selector pattern (e.g. “p
em”) 2013 Note: Seems to be limited support for this method (fails on FF)
document Properties



anchors[ ], forms[ ], images[ ], links[ ] – collections of all objects of this type within
the current document
body – the <body> Element object
documentElement– the <html> Element object
Note: The document object contains many other methods and properties
for various other purposes – view them from within the browser debugger
SE-2840
Dr. Mark L. Hornick
18
JavaScript access to DOM nodes
var pars = document.getElementsByTagName(“p”);//array of all <p> nodes
var e = pars.item(0);
// first <p>
e = pars[0];
// also first <p>
e = document.getElementById(“em1”);// specific element with #em1 id
getElementByID is one of the easiest ways to
access an individual element
p
Element node
Here is an
em
word
Text node
Attribute node
emphasized
SE-2840
Dr. Mark L. Hornick
id=“par1”
id=“em1”
19
Navigating among nodes
var p1 = document.getElementById(“par1”); // <p> node with id=“par1”
var first = p1.firstChild;
// first child node: “Here is an”
var next = first.nextSibling; // next child: “em”
var last = p1.lastChild;
var prev = last.prevSibling;
// last child: “word”
// previous child: “em”
var parent = p1.parentNode;
// whatever element contained <p>
p
Element node
Here is an
em
word
Text node
Attribute node
emphasized
SE-2840
Dr. Mark L. Hornick
id=“par1”
id=“em1”
20
Getting/Setting the HTML within a
node
var p1 = document.getElementById(“par1”); // <p> node with id=“par1”
var markup = p1.innerHTML; // “Here is an<em id=“black>emphasized</em> word”
p1.innerHTML = “Here is some <em>new</em> text!”;
p
Element node
Here is an
em
word
Text node
Attribute node
emphasized
SE-2840
Dr. Mark L. Hornick
id=“par1”
id=“em1”
21
Besides changing the existing HTML
markup within a node, we can script
the DOM to create entirely new nodes
var elm = document.createElement("p"); // creates free-standing <p>
var txt = document.createTextNode("Hello");
elm.appendChild(txt);
body
elm.setAttribute("id", “par1");
txt = document.createTextNode(" there.");
elm.appendChild(txt);
document.body.appendChild(elm); // put in <body>
p
<body>
<p id=“par1”>Hello there.</p>
</body>
Hello
SE-2840
Dr. Mark L. Hornick
id=“par1”
there.
22
The id or class of an existing element
can be changed dynamically in order
to modify the element’s appearance
var elm = document.getElementById(“par1”);
elm.setAttribute("id", “par2");
body
<style type=“text/css”>
#par1{ color:blue;}
#par2{ color:red;}
</style>
…
<body>
<p id=“par1”>Hello there.</p>
</body>
<body>
<p id=“par2”>Hello there.</p>
</body>
id=“par1”
p
id=“par2”
Hello
SE-2840
Dr. Mark L. Hornick
there.
23
All modern browsers implement
the element’s style object
The style object contains the element’s CSS
properties

You can use the style object to change any CSS
property the element supports
Style property names generally correspond to
CSS property names, with a few exceptions

In the case of CSS property names that contain a
hyphen, remove the hyphen and capitalize the next
letter for the corresponding style property
 CSS property: “background-color”

Style object property: “backgroundColor”
SE-2840
Dr. Mark L. Hornick
24
Or style attributes can be modified
directly via the style object
<style type=“text/css”>
#par1{ color:blue;}
#par2 { color:red;}
</style>
…
<script>
var elm = document.getElementById(“par1”);
elm.style.color=“green”;
</script>
p
…
The <p> element’s id remains “par1”,
but the style object is more specific
than the CSS rule, so the CSS rule is
overridden.
Hello
SE-2840
Dr. Mark L. Hornick
body
id=“par1”
there.
25
The visibility and display style
attributes affect whether the element
is seen or not, but in different ways
var elm = document.getElementById(“error”); // gets error message
elm.style.display = “none”;
// removes element from display process
elm.style.display = “block”; // includes element
elm.style.visibility = “hidden”; // hides
elm.style.visibility = “visible”; // shows
The display attribute, when set to “none”, causes the element to be
removed from the display. Other elements will fill in the space left
behind.
The visibility attribute, when set to “hidden”, causes the element to
be kept in the display, but not shown. An empty space will appear
where the element would otherwise appear.
This is a common approach to displaying
or hiding web page error messages
SE-2840
Dr. Mark L. Hornick
26