Document Object Model (DOM)

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