| |
| Overview |
| |
In this chapter you will learn :
- What is Document Object Model.
- What are JavaScript objects and how they are used.
- The object hierarchy followed in DOM
- Creating objects and accessing object's properties, events and methods.
- Various in-built objects.
|
Objects
When an HTML page is rendered in a browser; the browser brings together all the elements (objects) contained in the HTML page, downloaded from the web server, in its memory. It is important that the browser continues to identify individual HTML objects even after they are rendered in the browser window, if you want to create a user-friendly web page. With the identification of objects, the browser is allowed to access the properties of these objects using the built-in methods of the object. Once the properties of an object are accessible then the utility of the object can be controlled.
Once the page has been rendered in the browser, JavaScript enabled browsers are capable of identifying objects in an HTML page, because such browsers recognizes and uses the Document Object Model ( DOM ). Using the Document Object Model (DOM), JavaScript enabled browsers recognize the objects that have to be dealt with while rendering an HTML based web page.
The HTML objects, also known as the collection of web page elements, belong to the DOM. These objects have a descending relationship with each other. The foremost object in the DOM is the 'Navigator' (i.e. the Browser) itself (for example, Netscape, Internet explorer, Mozilla etc). The next level in the DOM is the browser's 'Window' or frame. The next object in the DOM is the 'Document' displayed in the browser's window. If the browser's window, next displays HTML form, then the next level in the DOM is the 'Form'.
The DOM hierarchy continues downward to surround individual elements on a 'Form', such as Text boxes, Text area, Labels, Radio buttons, Check boxes, Push buttons and so on, which belong to the form. The Dom recognized by JavaScript is described below :
Thus, with JavaScript enabled browser, most of the web page objects accessible except few of the elements which are not part of the DOM. For example, HTML tags such as <HEAD></HEAD>, <BODY></BODY>, Presentation styles, headings, body text, H1 to H6 etc are not part of the DOM hence not recognized by JavaScript.
However, when JavaScript assisted Style Sheets ( JSSS ) are included a web page, JavaScript recognizes the presentation styles, headings, body text, H1 to H6 and so on. JSSS is usually included between <HEAD></HEAD> tags in a web page. Objects added to the DOM by the use of JSSS are :
As JavaScript understands the DOM and can extend the DOM with the use of JSSS in a web page JavaScript understands 'Objects'. So, What are objects ? An object is an aggregate data type, that is made up of a collection of data elements. An object provides for the storage of multiple data values in a single unit. Each value is assigned a name which may then be used to reference it. All objects have :
Properties have values, belonging to objects.
Methods are ways of manipulating and accessing objects.
Events are a result of an action done by the user. To react to an event, it requires JavaScript code to be connected to JavaScript event handlers.
HTML objects have a number of properties that determine the behavior of that object. Properties determine the state of an object. An object's properties can be referenced as :
| Syntax |
| ObjectName.PropertyName |
For example, if the document object has a property called bgcolor then it can be referred as document.bgcolor. Both object name and property name are case sensitive. An object's property is set dynamically, when building interactive web pages, i.e., value of the property is set only when the object is being used. Thus program code can control the state of the object at run time. Methods of an object are used to set or get a value of an object's property. All objects have methods associated with them. An object's methods can be referenced as :
| Syntax |
| ObjectName.MethodName |
For example, document.write( ) is a method for accessing the object 'document'. JavaScript also allows you to access object's built-in methods.
The JavaScript objects are:
| Object Name |
Its use |
| Navigator |
To access information about the browser and its version that is currently executing the script. |
| Window |
It is a predefined object and does not require the prefix 'window'. It allows you to access a browser 'window' or a frame within a window. |
| Document |
To access the document currently loaded in a window. It has properties that relate to the current HTML document, such as title, name of a form, links, background color etc. |
| Location |
It represents a URL based on the current document location. It can be used to create a URL object, access parts of a URL, or modify an existing URL. |
| History |
To maintain a history of the URLs previously accessed within a window. |
|
