|
The HTML DOM defines an HTML document as a
collection of objects.
Objects have properties and methods. Objects
can respond to events.
An HTML DOM Example
This coding example shows how the background color of an HTML
document can be changed to yellow when a user clicks on it:
<html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
|
Try it yourself
Document Objects
The HTML DOM defines HTML documents as a collection of
objects.
The document object is the parent of all the other
objects in an HTML document.
The document.body object represents the <body> element
of the HTML document.
The document object is the parent of the body object,
and the body object is a child of the document object.
Object Properties
HTML document objects can have properties (also called
attributes).
The document.body.bgColor property defines the
background color of the body object.
The statement document.body.bgColor="yellow" in the
example above, sets the background color of the HTML document to
yellow.
Object Events
HTML document objects can respond to events.
The onclick="ChangeColor()" attribute of the <body>
element in the example above, defines an action to take place
when the user clicks on the document.
Functions
The ChangeColor() function in the example above, is a
JavaScript function.
The function will be triggered (started) when a user clicks
on the HTML document.
Changing Style
The HTML DOM also defines a model for changing the styles of
HTML objects.
The coding example below shows how to obtain the same effect
as the first example, by changing the style of the body object:
<html>
<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.style.background="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
|
|
