Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]   1DOCUMENT OBJECTMODELProf. AshishSingh Bhatia
2    HTML Page on Server       Browser assembles all elements       [Objects] in HTML Page in memory.           HTML page ...
JavaScript DOM3                                                             Textbox                                    anc...
4    Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
JavaScript DOM5       Navigator [ i.e. browser ] is the topmost object        in DOM.       Window is the next level obj...
Objects have6         Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
Note7                              JavaScript is an                              Object Based                             ...
Browser Objects8     Navigator                     Window                          document     • Access information      ...
How a JS enabled browser handles9    object types       One array im memory per HTML objects.       Arrays hold indexed ...
Arrays10     image/images            link/links                   Area     frame/ frames                                  ...
Form Element Arrays11        elements        text        textarea        radio        checkbox        button       ...
Event Handling12        Interactive          Depends on the user interaction with HTML page.          Eg : onMouseOver ...
JavaScript Event Handler13        onAbort                      onBlur                   onChange       onDblClick         ...
JavaScript Event Handler14        onKeyUp                     onLoad                   onMouseDown      onMouseMove       ...
JavaScript Event Handler15        onSelect                               onSubmit                       onUnload          ...
Form Example16         Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
Upcoming SlideShare
Loading in …5
×

Dom Basics

661 views

Published on

Understanding DOM

Published in: Education
  • Be the first to comment

  • Be the first to like this

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 ]

×