Understanding DOM

1. Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ] 1
DOCUMENT OBJECT
MODEL
Prof. AshishSingh Bhatia

2. 2
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
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

3. JavaScript DOM
3
Textbox
anchor
Textarea
Window link
Radiobutton
Form
Checkbox
Select
button
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

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

5. JavaScript DOM
5
 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.
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

6. Objects have
6
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

7. Note
7
JavaScript is an
Object Based
Programming
language
But it is not fully
object oriented
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

8. Browser Objects
8
Navigator Window document
• Access information • Browser Window or • Access currently
about the browser that frame loaded document in
is executing the • It is assumed window
current script
location history event
• Represent a URL. • Maintain history of • Access occurrence of
URL the event
Event screen
• Provides constants • Access information
that are used to about size and color
identify events depth of client screen
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

9. How a JS enabled browser handles
9
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.
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

10. Arrays
10
image/images link/links Area frame/ frames
embed/ mimeType/
anchor/anchors applet/ applets
embeds mimeTypes
plugin/ plugins form/ forms
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

11. Form Element Arrays
11
 elements
 text
 textarea
 radio
 checkbox
 button
 submit
 reset
 select
 option
 password
 hidden
 fileupload
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

12. Event Handling
12
 Interactive
 Depends on the user interaction with HTML page.
 Eg : onMouseOver
 Non Interactive
 Does not need user interaction to be invoked.
 Eg : onLoad
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

13. JavaScript Event Handler
13
onAbort onBlur onChange
onDblClick onDragDrop onError
onFocus onKeyDown onKeyPress
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

14. JavaScript Event Handler
14
onKeyUp onLoad onMouseDown
onMouseMove onMouseOut onMouseOver
onMouseUp onReset onResize
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

15. JavaScript Event Handler
15
onSelect onSubmit
onUnload
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

16. Form Example
16
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]