ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Dom Basics

•
•
AshishSingh Bhatia
AshishSingh Bhatia

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.

1 of 16
Downloaded 12 times
Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ] 1 DOCUMENT OBJECT MODEL Prof. AshishSingh Bhatia
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 ]
JavaScript DOM 3 Textbox anchor Textarea Window link Radiobutton Form Checkbox Select button Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
4 Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
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 ]
Objects have 6 Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
Note 7 JavaScript is an Object Based Programming language But it is not fully object oriented Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
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 ]
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 ]
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 ]
Form Element Arrays 11  elements  text  textarea  radio  checkbox  button  submit  reset  select  option  password  hidden  fileupload Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
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 ]
JavaScript Event Handler 13 onAbort onBlur onChange onDblClick onDragDrop onError onFocus onKeyDown onKeyPress Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
JavaScript Event Handler 14 onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onReset onResize Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
JavaScript Event Handler 15 onSelect onSubmit onUnload Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]
Form Example 16 Prof. AshishSing Bhatia [ ast.bhatia@gmail.com ]

More Related Content

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 ]