© David Arky/CORBIS
The Document Object Model (DOM) is a description of how the objects that make up a page are connected together to form the whole.
Using it you can gain access to each object's properties and methods and change them.
|
The DOM is a hierarchy of objects:
A nested object is denoted by the dot between them.
When the document is loaded, the browser creates arrays for the images, forms, links and anchors. The elements in the arrays are
indexed as they appear in the source code. The first image in a page can be referenced like this:
document.images[0]
You can also name your objects:
<img src="../../images_funny/object.jpg" width="57" height="100"
id="object" onclick="javascript:howWide();return true;" alt="" />
<script type="text/javascript">
<!--
function howWide(){
alert( document.getElementById('object').width);
}
-->
</script>
Every object has a
state and certain
behaviors. The state
of the object is defined by its data (its
properties), and the behavior of an object is defined by its code (its
methods).
Properties define the object's state
Methods define the object's behavior
Here, this
dot notation shows that the indicated property belongs to the indicated object.
To change a property of an object, you
send a message to the object telling it to execute the method—the sequence of instructions—that performs the change.
Like properties, methods have names. You address the message by giving the object name, followed by the name of
the method to execute:
objectName.method(parameter1, parameter2,...)
In addition to the three main child objects, the
window object also has properties and methods attached to it.
Here are 3 methods:
- alert();
-
prompt();
- confirm();
Their full names are:
- window.alert();
-
window.prompt();
-
window.confirm();
Example:
start example by clicking
here
<script type="text/javascript">
<!--
function ex(){
first=prompt("What is your first name");
if (first!=null){
confirm("Shall we continue "+first);
alert("Gotta go now "+first);
}
}
-->
</script>
start example by clicking<span onclick="javascript:ex();return true;" style="color:teal;"> here</span>
Assignment Statement
In some cases you do not need the method to change the state of the object; you can use the
assignment statement:
Where
X is the new value for the property and the
=
is known as the
assignment operator.
<img src="../../images_funny/object.jpg" width="57" height="100" id="object"
onclick="javascript:changeWide();return true;"alt="" />
<script type="text/javascript">
function changeWide(){
if (document.getElementById('object').width<600){
document.getElementById('object').width*=2;
}else{
document.getElementById('object').width=57;
}
}
-->
</script>
The location Object
- href —contains the complete URL of the current document (this property can be changed)
- referer —stores the URL of the previous document
The document Object
- URL —stores the URL of current document (read only)
- referer —stores the URL of the previous document (read only)
- title —stores what is in the
<title> element (read only)
- bgColor —stores the number of the background color of the document (read-write)
- fgColor —stores the number of the document's text
color (read-write)
The most-used method of the document object is
document.write().
The history Objectmethods:
- forward() —displays the page at the next URL on the history list
- go() —displays the page specified by a positive or negative number in the history list
- back() —displays the previous page from the history list
OBJECT: Window
PROPERTIES
closed Property
This property is used to return a Boolean value that determines
if a window has been closed. If it has, the value returned
is true.
Syntax:
window.closed
defaultStatus
Property
This property is used to define the default message displayed
in a window's status bar.
Syntax:
window.defaultStatus(
= "message")
document Property
This property's value is the document object contained within
the window.
Document
object.
Syntax:
window.document
framesProperty
This property is an array containing references to all the
named child frames in the current window.
Syntax:
window.frames
( = "frameID")
history Property
This property's value is the window's History object,
containing details of the URL's visited from within that window.
See
History
object.
Syntax:
window.history
innerHeight / innerWidth Properties Netscape only
These properties determine the inner dimensions of a window's
content area.
Syntax:
window.innerHeight
= pixelDimensions
window.innerWidth
= pixelDimensions
length Property
This property returns the number of child frames contained
within a window, and gives identical results as using the
length property of the
frames array.
Syntax:
window.length
location Property
This property contains details of the current URL of the window
and its value is always the Location
object for that window.
Syntax:
window.location
locationbar Property Netscape only
This property relates to the area of a browser's window that
contains the details of the URL or bookmark (this is where
you physically enter URL details). The locationbar property
has its own property, visible, that defaults to true (visible)
and can be set to false (hidden).
Syntax:
window.locationbar[.visible
= false]
menubar Property Netscape only
This property relates to the area of a browser's window that
contains the various pull-down menus (File, Edit, View, etc.).
The menubar property has its own property, visible, that defaults
to true (visible) and can be set to false (hidden).
Syntax:
window.menubar[.visible
= false]
name Property
This property is used to return or set a window's name.
Syntax:
window.name
opener Property
When opening a window using window.open, use this property
from the destination window to return details of the source
window. This has many uses, for example, window.opener.close()
will close the source window.
Syntax:
window.opener
outerheight / outerwidth Property
These properties determine the dimensions, in pixels, of the
outside boundary, including all interface elements, of a window.
Syntax:
window.outerheight
Syntax:
window.outerwidth
pageXOffset / pageYOffset Property
These properties return the X and Y position of the current
page in relation to the upper left corner of a window's display
area.
Syntax:
window.pageXOffset
Syntax:
window.pageYOffset
parent Property
This property is a reference to the window or frame that contains
the calling child frame.
Syntax:
window.parent
personalbar Property
This property relates to the browser's personal bar (or directories
bar). The personalbar property has its own property, visible,
that defaults to true (visible) and can be set to false (hidden).
Syntax:
window.personalbar[.visible
= false]
scrollbars Property
This property relates to the browser's scrollbars (vertical
and horizontal). The scrollbars property has its own property,
visible, that defaults to true (visible) and can be set to
false (hidden).
Syntax:
window.scrollbars[.visible
= false]
self Property
This property is a reference (or synonym) for the current
active window or frame.
Syntax:
self.property
or method
status Property
This property, which can be set at any time, is used to define
the transient message displayed in a window's status bar such
as the text displayed when you
onMouseOver a link or
anchor.
Syntax:
window.status(=
"message")
statusbar Property
This property relates to the browser's status bar. The statusbar
property has its own property, visible, that defaults to true
(visible) and can be set to false (hidden).
Syntax:
window.statusbar[.visible
= false]
toolbar Property
This property sets or returns a Boolean value that defines
whether the browser's tool bar is visible or not. The default
is true (visible). False means hidden. It can only be set
before the window is opened and you must have UniversalBrowserWrite
privilege.
Syntax:
window.toolbar[.visible
= false]
top Property
This property is a reference (or synonym) for the topmost
browser window.
Syntax:
top.property
or method
window Property
This property is a reference (or synonym) for the current
window or frame.
Syntax:
window.property
or method
METHODS
alert Method
This method displays an alert box containing a message and
an o.k. button.
Syntax:
window.alert("message")
back Method
Netscape only
Using this method is the same as clicking the browser's Back
button, i.e. it undoes the last navigation step performed
from the current top-level window.
Syntax:
window.back(
)
blur Method
This method is used to remove focus from the current window.
Syntax:
window.blur(
)
captureEvents Method
This method instructs the window to capture all events of
a particular type. See the event object for a list of event
types.
Syntax:
window.captureEvent(eventType)
clearInterval Method
This method is used to cancel a timeout previously set with
the setInterval
method.
Syntax:
window.clearInterval(intervalID)
clearTimeout Method
This method is used to cancel a timeout previously set with
the setTimeout
method.
Syntax:
window.clearTimeout(timeoutID)
close Method
This method is used to close a specified window. If no window
reference is supplied, the close() method will close the current
active window. Note that this method will only close windows
created using the open() method; if you attempt to close a
window not created using open(), the user will be prompted
to confirm this action with a dialog box before closing. The
single exception to this is if the current active window has
only one document in its session history. In this case the
closing of the window will not require confirmation.
Syntax:
window.close(
)
confirm Method
This method brings up a dialog box that prompts the user to
select either 'o.k.' or 'cancel', the first returning true
and the latter, false.
Syntax:
window.confirm("message")
disableExternalCapture Method
This method disables the capturing of events previously enabled
using the enableExternalCapture method below.
Syntax:
window.disableExternalCapture(
)
enableExternalCapture Method
This method allows a window that contains frames to capture
events in documents loaded from different servers.
Syntax:
window.enableExternalCapture(
)
find Method
Netscape only
This method allows the searching of the contents of a window
for a specified string. The
caseSensitive and
backward
arguments are Booleans and to use either of these you must
also specify the other. If a search string is not supplied,
JavaScript will display a Find dialog box which prompts the
user for a string to search for, and also provides the facility
to set the other two (
caseSensitive and
backward)
arguments.
Syntax:
window.find([string[,
caseSensitive, backward]])
focus Method
This method is used to give focus to the specified window.
This is useful for bringing windows to the top of any others
on the screen.
Syntax:
window.focus(
)
forward Method
Using this method is the same as clicking the browser's Forward
button, i.e. it goes to the next URL in the history list of
the current top-level window.
Syntax:
window.forward(
)
handleEvent Method
This method is used to call the handler for the specified
event.
Syntax:
window.handleEvent("eventID")
home Method
Using this method has the same effect as pressing the Home
button in the browser, i.e. the browser goes to the URL set
by the user as their home page.
Syntax:
window.home(
)
moveBy Method
This method is used to move the window a specified number
of pixels in relation to its current co-ordinates.
Syntax:
window.moveBy(horizPixels,
vertPixels)
moveTo Method
This method moves the window's left edge and top edge to the
specified x and y co-ordinates, respectively.
Syntax:
window.moveTo(Xposition,
Yposition)
open Method
This method is used to open a new browser window.
Syntax:
window.open(URL,
name [, features])
print Method
This method is used to print the contents of the specified
window.
Syntax:
window.print(
)
prompt Method
This method displays a dialog box prompting the user for some
input.
Syntax:
window.prompt(message[,
defaultInput])
releaseEvents Method
This method is used to release any captured events of the
specified type and to send them on to objects further down
the event hierarchy
Syntax:
window.releaseEvents("eventType")
resizeBy Method
This method is used to resize the window. It moves the bottom
right corner of the window by the specified horizontal and
vertical number of pixels while leaving the top left corner
anchored to its original co-ordinates.
Syntax:
window.resizeBy(horizPixels,
vertPixels)
resizeTo Method
This method is used to resize a window to the dimensions supplied
with the
outerWidth and
outerHeight (both integers,
in pixels) parameters.
Syntax:
window.resizeTo(outerWidth,
outerHeight)
routeEvent Method
This method is used to send a captured event further down
the normal event hierarchy; specifically, the event is passed
to the original target object unless a sub-object of the window
(a document or layer) is also set to capture this type of
event, in which case the event is passed to that sub-object.
Syntax:
window.routeEvent(eventType)
scroll Method
This method is used to scroll the window to the supplied co-ordinates.
This method is now deprecated; use the scrollTo method detailed
below instead.
Syntax:
window.scroll(coordsPixels)
scrollBy Method
This method is used to scroll the window's content area by
the specified number of pixels. This is only useful when there
are areas of the document that cannot be seen within the window's
current viewing area, and the visible property of the window's
scrollbar must be set to true for this method to work.
Syntax:
window.scrollBy(horizPixels,
vertPixels)
scrollTo
Method
This method scrolls the contents of a window, the specified
co-ordinate becoming the top left corner of the viewable area.
Syntax:
window.scrollTo(xPosition,
yPosition)
setInterval
Method
This method is used to call a function or evaluate an expression
at specified intervals, in milliseconds.
Syntax:
window.setInterval(expression/function,
milliseconds)
setTimeout
Method
This method is used to call a function or evaluate an expression
after a specified number of milliseconds.
Syntax:
window.setTimeout(expression/function,
milliseconds)
stop Method
This method is used to cancel the current download. This is
the same as clicking the browser's Stop button.
Syntax:
window.stop(
)
EVENT HANDLERS
onBlur Event
handler
This event handler executes some specified JavaScript code
on the occurrence of a
Blur event (when an window loses
focus).
Syntax:
window.onBlur="myJavaScriptCode"
onDragDrop
Event handler
This event handler executes some specified JavaScript code
on the occurrence of a
DragDrop event.
Syntax:
window.onDragDrop="myJavaScriptCode"
onError
Event handler
This event handler executes some specified JavaScript code
on the occurrence of an
Error event.
Syntax:
window.onError="myJavaScriptCode"
onFocus
Event handler
This event handler executes some specified JavaScript code
on the occurrence of a
Focus event.
Syntax:
window.onFocus="myJavaScriptCode"
onload Event
handler
This event handler executes some specified JavaScript code
on the occurrence of a
Load event.
Syntax:
window.onload="myJavaScriptCode"
onMove Event
handler
This event handler executes some specified JavaScript code
on the occurrence of a
Move event.
Syntax:
window.onMove="myJavaScriptCode"
onResize
Event handler
This event handler executes some specified JavaScript code
on the occurrence of a
Resize event.
Syntax:
window.onResize="myJavaScriptCode"
onUnload
Event handler
This event handler executes some specified JavaScript code
on the occurrence of an
Unload event.
Syntax:
window.onUnload="myJavaScriptCode"