dom tuan10 1577

Document Object Model (DOM)
Computer Science & Engineering

LOGO


LOGO

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

csehui.wordpress.com

reset
select
submit
text
textarea

anchor
applet
class
element
embeb
ID

image
layer
link
plug-in
style
tag

Computer Science & Engineering


LOGO

CREATING OBJECTS
Define the function:
function ObjectName(List Parameter)
{
this.property1= Parameter1;
this.property2= Parameter2;
…
this.method1=functionName1;
this.method2=functionName2;
…
}
csehui.wordpress.com

Computer Science & Engineering


LOGO

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

csehui.wordpress.com

Computer Science & Engineering


ARRAY OBJECT

LOGO

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

csehui.wordpress.com

Computer Science & Engineering


FORM OBJECT

LOGO

Text Object Properties

csehui.wordpress.com

Computer Science & Engineering


LOGO

FORM OBJECT
Text Object Methods

Ex: <script type="text/javascript">

function setFocus()
{
document.getElementById('text1').focus()
}
function loseFocus()
{
document.getElementById('text1').blur()
}
</script>

csehui.wordpress.com

Computer Science & Engineering