Upload
ashishsingh-bhatia
View
369
Download
3
Tags:
Embed Size (px)
DESCRIPTION
Understanding DOM
Citation preview
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 [ [email protected] ]
JavaScript DOM
Window
anchor
link
Form
Textbox
Textarea
Radiobutton
Checkbox
Select
button
3
Prof. AshishSing Bhatia [ [email protected] ]
4
Prof. AshishSing Bhatia [ [email protected] ]
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 [ [email protected] ]
Objects have6
Prof. AshishSing Bhatia [ [email protected] ]
Note
JavaScript is an Object Based Programminglanguage
But it is not fully object oriented
7
Prof. AshishSing Bhatia [ [email protected] ]
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 [ [email protected] ]
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 [ [email protected] ]
Arrays
image/images link/links Area frame/ frames
anchor/anchors applet/ appletsembed/
embeds
mimeType/
mimeTypes
plugin/ plugins form/ forms
10
Prof. AshishSing Bhatia [ [email protected] ]
Form Element Arrays
elements
text
textarea
radio
checkbox
button
submit
reset
select
option
password
hidden
fileupload
11
Prof. AshishSing Bhatia [ [email protected] ]
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 [ [email protected] ]
JavaScript Event Handler
onAbort onBlur onChange
onDblClick onDragDrop onError
onFocus onKeyDown onKeyPress
13
Prof. AshishSing Bhatia [ [email protected] ]
JavaScript Event Handler
onKeyUp onLoad onMouseDown
onMouseMove onMouseOut onMouseOver
onMouseUp onReset onResize
14
Prof. AshishSing Bhatia [ [email protected] ]
JavaScript Event Handler
onSelect onSubmit
onUnload
15
Prof. AshishSing Bhatia [ [email protected] ]