Document Object Model (DOM)

Transcription

1 Document Object Model (DOM)

2 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. window document event frame history location navigator screen document form button check box hidden password radio reset select submit text textarea anchor applet class element embeb ID image layer link plug-in style tag

3 CREATING OBJECTS Define the function: function ObjectName(List Parameter) { this.property1= Parameter1; this.property2= Parameter2; this.method1=functionname1; this.method2=functionname2; }

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();

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"];

6 ARRAY OBJECT Array Object Properties Ex: var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("original length: " + fruits.length);

7 ARRAY OBJECT Array Object Methods

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);

9 DATE OBJECT Date Object Methods

10 DATE OBJECT Date Object Methods

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

12 MATH OBJECT Math Object Methods

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);

14 MATH OBJECT String Object Methods

15 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

16 Form Object Properties

17 Form elements Collection The elements collection returns an array containing each element in the form. Syntax formobject.elements[].property.

18 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>

19 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().

20 Button Object Properties

21 Button Object Methods

22 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().

23 Select Object Properties

24 Select Object Methods

25 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().

26 Radio Object Properties

27 Radio Object Methods

28 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().

29 Text Object Properties

30 Text Object Methods Ex: <script type="text/javascript"> function setfocus() { document.getelementbyid('text1').focus() } function losefocus() { document.getelementbyid('text1').blur() } </script>