Page 176 - DCAP408_WEB_PROGRAMMING

Web Programming

Notes Using the Document Object Model (DOM) JavaScript enabled browsers identify the collection of
web page objects (web page elements) that have to be dealt with while rendering an HTML
based, web page in the browser window.

!
Caution The HTML objects which belong to the DOM, have a descending relationship with
each other.
The top most object in the DOM is the ‘Navigator’ (i.e., the browser) itself. The next level in the
DOM the browser’s ‘Window’. The next level in the DOM is the ‘Document’ displayed in the
browser’s window.
Should the document displayed in the browser’s window have an HTML ‘Form’ coded in it, the
next level in the DOM is the ‘Form’ itself.
The DOM hierarchy continues downward to encompass individual elements on a ‘FORM’, such as
Text boxes, Labels, Radio buttons, Check boxes, Push buttons and so on, which belong to the form.

JavaScript’s object hierarchy is mapped to the DOM, which in turn is mapped to the web page
elements in the browser window. Hence, when a web page is rendered in a JavaScript enabled
browser window, JavaScript is capable of uniquely identifying each element in the web page,
because major elements of a web page are bound to the DOM.

The DOM that JavaScript recognizes is described below:
The Navigator – i.e., Netscape Navigator, Internet Explorer, Opera, Mosaic, etc.

Figure 6.1: JavaScript DOM

Window

Document Anchor

Link

Form Textbox

Textarea

Radiobutton

Checkbox

Select

Button
Instance

No HTML is registered in the DOM by a JavaScript enabled browser unless they are assembled
in memory prior being rendered in the browser window. What this means is, if a document does
not have any ‘Anchor’ described in the ‘Anchors’ object will exist but it will be empty. If the
document does not have any ‘Link’ described in it the Links object will exist but it will be empty.

170 LOVELY PROFESSIONAL UNIVERSITY