Dom Basics

591 views
470 views

Published on

Understanding DOM

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
591
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dom Basics

  1. 1. Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ] 1DOCUMENT OBJECTMODELProf. AshishSingh Bhatia
  2. 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. 3. JavaScript DOM3 Textbox anchor Textarea Window link Radiobutton Form Checkbox Select button Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  4. 4. 4 Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  5. 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. 6. Objects have6 Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  7. 7. Note7 JavaScript is an Object Based Programming language But it is not fully object oriented Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  8. 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. 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. 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. 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. 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. 13. JavaScript Event Handler13 onAbort onBlur onChange onDblClick onDragDrop onError onFocus onKeyDown onKeyPress Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  14. 14. JavaScript Event Handler14 onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onReset onResize Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  15. 15. JavaScript Event Handler15 onSelect onSubmit onUnload Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
  16. 16. Form Example16 Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

×