Dom Basics
1 like757 views
The document discusses the Document Object Model (DOM) and how browsers structure HTML pages in memory as objects. When a browser loads an HTML page, it assembles all the page elements as objects in memory. The DOM defines the JavaScript programming interface for accessing and manipulating these HTML elements. The DOM represents an HTML document as nodes and objects that have properties and methods. This allows JavaScript to access and update the content, structure, and style of a document dynamically.
![Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ] 1
DOCUMENT OBJECT
MODEL
Prof. AshishSingh Bhatia](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-1-320.jpg)
![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 ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-2-320.jpg)
![JavaScript DOM
3
Textbox
anchor
Textarea
Window link
Radiobutton
Form
Checkbox
Select
button
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-3-320.jpg)
![4
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-4-320.jpg)
![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 ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-5-320.jpg)
![Objects have
6
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-6-320.jpg)
![Note
7
JavaScript is an
Object Based
Programming
language
But it is not fully
object oriented
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-7-320.jpg)
![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 ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-8-320.jpg)
![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 ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-9-320.jpg)
![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 ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-10-320.jpg)
![Form Element Arrays
11
elements
text
textarea
radio
checkbox
button
submit
reset
select
option
password
hidden
fileupload
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-11-320.jpg)
![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 ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-12-320.jpg)
![JavaScript Event Handler
13
onAbort onBlur onChange
onDblClick onDragDrop onError
onFocus onKeyDown onKeyPress
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-13-320.jpg)
![JavaScript Event Handler
14
onKeyUp onLoad onMouseDown
onMouseMove onMouseOut onMouseOver
onMouseUp onReset onResize
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-14-320.jpg)
![JavaScript Event Handler
15
onSelect onSubmit
onUnload
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-15-320.jpg)
![Form Example
16
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]](https://image.slidesharecdn.com/dom-130127025751-phpapp02/85/Dom-Basics-16-320.jpg)
Dom Basics
- 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 ]