1 / 30

Document Object Model (DOM)

Document Object Model (DOM). Computer Science & Engineering. window. document. even t. frame. history. location. navigator. screen. document. anchor image applet layer class link element plug-in embeb style ID tag. form.

lee
Download Presentation

Document Object Model (DOM)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Document Object Model (DOM) Computer Science & Engineering

  2. window document event frame history location navigator screen document anchor imageappletlayerclass linkelement plug-inembeb styleID tag form button resetcheck box selecthidden submitpasswordtextradio textarea HTML DOM • The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. Computer Science & Engineering

  3. CREATING OBJECTS • Define the function: function ObjectName(List Parameter) { this.property1= Parameter1; this.property2= Parameter2; … this.method1=functionName1; this.method2=functionName2; … } Computer Science & Engineering

  4. CREATING OBJECTS • To call object we use the keyword new. • Exemple: function myobject() { this.containedValue = 0; this.othercontainedValue = 0; this.anothercontainedValue = 0; } var mything = new myobject(); Computer Science & Engineering

  5. ARRAY OBJECT • Array: An array is a special variable, which can hold more than one value, at a time. • An array can be defined in three ways: • var myCars=new Array(); myCars[0]="Saab";   myCars[1]="Volvo";myCars[2]="BMW"; • var myCars=new Array("Saab","Volvo","BMW"); • var myCars=["Saab","Volvo","BMW"]; Computer Science & Engineering

  6. ARRAY OBJECT • Array Object Properties Ex: var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("Original length: " + fruits.length); Computer Science & Engineering

  7. ARRAY OBJECT • Array Object Methods Computer Science & Engineering

  8. DATE OBJECT • Date Object: The Date object is used to work with dates and times. • Date objects are created with new Date(). • There are four ways of instantiating a date: var d = new Date();var d = new Date(milliseconds);var d = new Date(dateString);var d = new Date(year, month, day, hours, minutes, seconds, milliseconds); Computer Science & Engineering

  9. DATE OBJECT • Date Object Methods Computer Science & Engineering

  10. DATE OBJECT • Date Object Methods Computer Science & Engineering

  11. MATH OBJECT • The Math object allows you to perform mathematical tasks. • Math is not a constructor. All properties/methods of Math can be called by using Math as an object, without creating it. • Ex: var x = Math.PI; // Returns PI var y = Math.sqrt(16); // Returns the square root of 16 Computer Science & Engineering

  12. MATH OBJECT • Math Object Methods Computer Science & Engineering

  13. STRING OBJECT • String: • The String object is used to manipulate a stored piece of text. • String objects are created with new String(). • Syntax var txt = new String(string); Computer Science & Engineering

  14. MATH OBJECT • String Object Methods Computer Science & Engineering

  15. FORM OBJECT • Form: • The Form object represents an HTML form. • For each instance of a <form> tag in an HTML document, a Form object is created. • Form Object Methods Computer Science & Engineering

  16. FORM OBJECT • Form Object Properties Computer Science & Engineering

  17. FORM OBJECT • Form elements Collection • The elements collection returns an array containing each element in the form. • Syntax • formObject.elements[].property. Computer Science & Engineering

  18. FORM OBJECT EX: <form id="myForm">Firstname: <input id="fname" type="text" value="Mickey" />Lastname: <input id="lname" type="text" value="Mouse" /><input id="sub" type="button" value="Submit" /> </form><p>Get the value of all the elements in the form:<br /><script type="text/javascript">var x=document.getElementById("myForm");for (var i=0;i<x.length;i++)  {  document.write(x.elements[i].value);  document.write("<br />");  }</script></p> Computer Science & Engineering

  19. FORM OBJECT • Button Object: The Button object represents a button in an HTML form. • For each instance of an <input type="button"> tag in an HTML form, a Button object is created. • You can access a button by searching through the elements[] array of the form, or by using document.getElementById(). Computer Science & Engineering

  20. FORM OBJECT • Button Object Properties Computer Science & Engineering

  21. FORM OBJECT • Button Object Methods Computer Science & Engineering

  22. FORM OBJECT • Select Object • The Select object represents a dropdown list in an HTML form. • For each instance of an HTML <select> tag in a form, a Select object is created. • You can access a Select object by searching through the elements[] array of the form, or by using document.getElementById(). Computer Science & Engineering

  23. FORM OBJECT • Select Object Properties Computer Science & Engineering

  24. FORM OBJECT • Select Object Methods Computer Science & Engineering

  25. FORM OBJECT • Radio Object • The Radio object represents a radio button in an HTML form. • For each instance of an <input type="radio"> tag in an HTML form, a Radio object is created. • You can access a radio object by searching through the elements[] array of the form, or by using document.getElementById(). Computer Science & Engineering

  26. FORM OBJECT • Radio Object Properties Computer Science & Engineering

  27. FORM OBJECT • Radio Object Methods Computer Science & Engineering

  28. FORM OBJECT • Text Object • The Text object represents a text-input field in an HTML form. • For each instance of an <input type="text"> tag in an HTML form, a Text object is created. • You can access a text-input field by searching through the elements[] array of the form, or by using document.getElementById(). Computer Science & Engineering

  29. FORM OBJECT • Text Object Properties Computer Science & Engineering

  30. FORM OBJECT • Text Object Methods Ex: <script type="text/javascript"> function setFocus() { document.getElementById('text1').focus() } function loseFocus()  {  document.getElementById('text1').blur() } </script> Computer Science & Engineering

More Related