Dom Basics
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Dom Basics

on

  • 594 views

Understanding DOM

Understanding DOM

Statistics

Views

Total Views
594
Views on SlideShare
578
Embed Views
16

Actions

Likes
0
Downloads
8
Comments
0

1 Embed 16

http://asbspace.in 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dom Basics Presentation Transcript

  • 1. Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ] 1DOCUMENT OBJECTMODELProf. 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 DOM3 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 DOM5  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 have6 Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  • 7. Note7 JavaScript is an Object Based Programming language But it is not fully object oriented Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  • 8. Browser Objects8 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 handles9 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. Arrays10 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 Arrays11  elements  text  textarea  radio  checkbox  button  submit  reset  select  option  password  hidden  fileupload Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  • 12. Event Handling12  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 Handler13 onAbort onBlur onChange onDblClick onDragDrop onError onFocus onKeyDown onKeyPress Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  • 14. JavaScript Event Handler14 onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onReset onResize Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  • 15. JavaScript Event Handler15 onSelect onSubmit onUnload Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  • 16. Form Example16 Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]