Scribd
Upload
51 views

The HTML Dom

HTML document object Model (DOM) is the browser's view of an HTML page as an object hierarchy. In JavaScript, objects can be referenced using dot notation, starting with the highestlevel object (i.e. Window) objects can be referred to by name or id or by their position on the page.

Uploaded by

Murali Mohan Reddy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
51 views

The HTML Dom

HTML document object Model (DOM) is the browser's view of an HTML page as an object hierarchy. In JavaScript, objects can be referenced using dot notation, starting with the highestlevel object (i.e. Window) objects can be referred to by name or id or by their position on the page.

Uploaded by

Murali Mohan Reddy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 3

The HTML DOM

The HTML Document Object Model (DOM) is the browser's view of an HTML page
as an object hierarchy, starting with the browser window itself and moving deeper
into the page, including all of the elements on the page and their attributes. Below is a

simplified version of the HTML DOM.

As shown, the top-level object is window. The document object is a child of window
and all the objects (i.e, elements) that appear on the page (e.g, forms, links, images,
tables, etc.) are descendants of the document object. These objects can have children
of their own. For example, form objects generally have several child objects,
including textboxes, radio buttons, and select menus.

Dot Notation

In JavaScript, objects can be referenced using dot notation, starting with the highest-
level object (i.e, window). Objects can be referred to by name or id or by their
position on the page. For example, if there is a form on the page named "loginform",
using dot notation you could refer to the form as follows:

Syntax
window.document.loginform

Assuming that loginform is the first form on the page, you could also refer to this
way:
Syntax
window.document.forms[0]

A document can have multiple form elements as children. The number in the square
brackets ([]) indicates the specific form in question. In programming speak, every
document object contains an array of forms. The length of the array could be zero
(meaning there are no forms on the page) or greater. In JavaScript, arrays are zero-
based, meaning that the first form on the page is referenced with the number zero (0)
as shown in the syntax example above.

Square Bracket Notation

Objects can also be referenced using square bracket notation as shown below.

Syntax
window['document']['loginform']

// and

window['document']['forms[0]']

Dot notation and square bracket notation are completely interchangeable. Dot notation
is much more common; however, as we will see later in the course, there are times
when it is more convenient to use square bracket notation.

Event Handlers
In JavaScriptBasics/Demos/JavaScript2.html, we used the onclick event handler to
call JavaScript code that changed the background color of the page. Event handlers
are attributes that force an element to "listen" for a specific event to occur. Event
handlers all begin with the letters "on". The table below lists the HTML event
handlers with descriptions.

HTML Event Handlers


Event
Elements Supported Description
Handler
the element lost the
onblur a, area, button, input, label, select, textarea
focus
the element value
onchange input, select, textarea
was changed
All elements except applet, base, basefont, bdo,
a pointer button was
onclick br, font, frame, frameset, head, html, iframe,
clicked
isindex, meta, param, script, style, title
All elements except applet, base, basefont, bdo,
a pointer button was
ondblclick br, font, frame, frameset, head, html, iframe,
double clicked
isindex, meta, param, script, style, title
the element
onfocus a, area, button, input, label, select, textarea
received the focus
onkeydown All elements except applet, base, basefont, bdo, a key was pressed
HTML Event Handlers
Event
Elements Supported Description
Handler
br, font, frame, frameset, head, html, iframe,
down
isindex, meta, param, script, style, title
All elements except applet, base, basefont, bdo,
a key was pressed
onkeypress br, font, frame, frameset, head, html, iframe,
and released
isindex, meta, param, script, style, title
All elements except applet, base, basefont, bdo,
onkeyup br, font, frame, frameset, head, html, iframe, a key was released
isindex, meta, param, script, style, title
all the frames have
onload frameset
been loaded
the document has
onload body
been loaded
All elements except applet, base, basefont, bdo,
a pointer button was
onmousedown br, font, frame, frameset, head, html, iframe,
pressed down
isindex, meta, param, script, style, title
All elements except applet, base, basefont, bdo,
a pointer was
onmousemove br, font, frame, frameset, head, html, iframe,
moved within
isindex, meta, param, script, style, title
All elements except applet, base, basefont, bdo,
a pointer was
onmouseout br, font, frame, frameset, head, html, iframe,
moved away
isindex, meta, param, script, style, title
All elements except applet, base, basefont, bdo,
a pointer was
onmouseover br, font, frame, frameset, head, html, iframe,
moved onto
isindex, meta, param, script, style, title
All elements except applet, base, basefont, bdo,
a pointer button was
onmouseup br, font, frame, frameset, head, html, iframe,
released
isindex, meta, param, script, style, title
onreset form the form was reset
some text was
onselect input, textarea
selected
the form was
onsubmit form
submitted
all the frames have
onunload frameset
been removed
the document has
onunload body
been removed

http://www.learn-javascript-tutorial.com/

You might also like