Web Application Engineering

Lecture 13

Shahbaz Ahmad
shehbazsahi@live.com

1
 Lecture 13
• Document Object Model
• DOM Structure
• Accessing Values Using Dot Notation
• Properties of Document Object
• Methods of Document Object
• Forms Collection
• Images Collection
• DOM Objects Classification
2
Document Object Model

3
 Document Object Model
• When the browser loads a page, it stores it in an electronic form that
programmers can then access through something known as an interface
• The interface is a little like a predefined set of questions and commands. For
example, you can ask questions like:
– What is the title of the page?
– What is the third item in the bulleted list whose id attribute has a value of ToDoList ?
– What is the URL of the page in the first link on the page?
• Use commands to tell the browser to change some of these values, or even
add new elements into the page.
• The interface that works with web pages is called the Document Object
Model
• A document object has properties that describe the background color of the
web page or the title of the page.

4
 Document Object Model
• Methods
– Describes an action that can be done to (or with) the object
– A method on a document could be to write a new line of text into the web page.
• Events
– An event is the object putting up its hand and saying “ x just happened ”
– A document might raise an event when the user presses Submit on a form, or clicks a link.
– Event can also trigger actions
• Object Model
– A description of how a program can represent real-life entities using a set of objects, and it also
specifies a set of methods, properties, and events an object may have.
• In Document Object Model, the page as a whole is represented using a document
object
• Document Object Model describes how you can:
– Get and set properties of a web page such as the background color.
– Call methods that perform actions such as writing a new line into a page.
– React to events such as a user pressing a Submit button on a form.

5
 Document Object Model
• Document Object Model as an interface
between the browser and the programming
language,
– you can compare it to a remote control that acts
as the interface between your TV and you.
• When working with the DOM, it does not
matter what language you program with. As
long as you use the right properties and
methods, the effect will be the same.
6
DOM Structure

7
 Accessing Values Using Dot Notation

• The DOM would allow a script to access:

8
Properties of Document Object

9
 Methods of the Document Object
• write(string)
– Allows you to add text or elements into a document
• writeln(string)
– The same as write(), but adds a new line at the end of
the output

• document.write(‘This is a document’);
• document.write(‘Page last modified on ‘ +
document.lastModified);
10
 DOM – Finding Element
• Finding HTML elements by id
– var myElement =
document.getElementById("intro");
• Finding HTML elements by tag name
– document.getElementsByTagName("p");
• Finding HTML elements by class name
– document.getElementsByClassName("intro");

11
 DOM - HTML
• Changing HTML Content
– document.getElementById(id).innerHTML = new
HTML
• Changing Attribute
– document.getElementById("myImage").src
= "landscape.jpg";

12
 DOM – Style
• Changing HTML Style
• document.getElementById(id).style.property=
new style
– document.getElementById("p2").style.color
= "blue";

13
 DOM - Events
• onclick=JavaScript
– <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

– <script>
– document.getElementById("myBtn").onclick = displayDate;

– function displayDate() {
– document.getElementById("demo").innerHTML = Date();
–}
– </script>

14
 Forms Collection
• Holds references corresponding to each of the
< form > elements in the page
• DOM deals with this by having a separate form
object to represent each of the individual
forms
– document.forms[0].action
– document.frmLogin.action
• Properties of the Form Objects

15
 Images Collection
• Provides references to image objects, one
representing each image in a document.
• The src attribute of the first image can be
found using the index number like so:
• document.images[0].src

16