dom basics

DOCUMENT OBJECT MODEL

Prof. AshishSingh Bhatia

1Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

HTML Page on Server

Browser assembles all elements [Objects] in HTML Page in memory.

HTML page is rendered in the browser windows

Browser no longer recognize any elements

2

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

JavaScript DOM

Window

anchor

link

Form

Textbox

Textarea

Radiobutton

Checkbox

Select

button

3

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

4

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

JavaScript DOM

Navigator [ i.e. browser ] is the topmost object

in DOM.

Window is the next level object in DOM.

JavaScript DOM also known as instance hierarchy.

If the object is not there it will be empty.

Not every element is a part of DOM.

JSSS adds the support for the tags too.

5

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

Objects have6

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

Note

JavaScript is an Object Based Programminglanguage

But it is not fully object oriented

7

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

Browser Objects

Navigator

• Access information about the browser that is executing the current script

Window

• Browser Window or frame

• It is assumed

document

• Access currently loaded document in window

location

• Represent a URL.

history

• Maintain history of URL

event

• Access occurrence of the event

Event

• Provides constants that are used to identify events

screen

• Access information about size and color depth of client screen

8

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

How a JS enabled browser handles object types

One array im memory per HTML objects.

Arrays hold indexed elements if the HTML objects

are actually contained in HTML. Else empty array

will exist.

Index starts with 0.

9

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

Arrays

image/images link/links Area frame/ frames

anchor/anchors applet/ appletsembed/

embeds

mimeType/

mimeTypes

plugin/ plugins form/ forms

10

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

Form Element Arrays

elements

text

textarea

radio

checkbox

button

submit

reset

select

option

password

hidden

fileupload

11

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

Event Handling

Interactive

Depends on the user interaction with HTML page.

Eg : onMouseOver

Non Interactive

Does not need user interaction to be invoked.

Eg : onLoad

12

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

JavaScript Event Handler

onAbort onBlur onChange

onDblClick onDragDrop onError

onFocus onKeyDown onKeyPress

13

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

JavaScript Event Handler

onKeyUp onLoad onMouseDown

onMouseMove onMouseOut onMouseOver

onMouseUp onReset onResize

14

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

JavaScript Event Handler

onSelect onSubmit

onUnload

15

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

Form Example

Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

16