JavaScript Objects

Session 12

Objectives Browser objects. Other browser objects.

DOM (Document Object Model)

JavaScript allows you to access HTML elements and also change the existing structure of an HTML page. This can be done by using the different JavaScript properties and methods that follow the DOM specification. DOM is a technique used for accessing and manipulating HTML elements.

DOM specifications are implemented by all the browsers to overcome incompatibility issues. W3C DOM specifications are divided into levels. The level 1 specification of DOM was specification was in the year 1998. The current DOM specification is level 3.

Nodes The DOM is a blueprint through

which can access of HTML elements and use JavaScript to dynamically manipulate them.

The DOM reads all the elements contained in an HTML page. It treats the HTML elements as nodes.

There are element nodes, attribute nodes and text nodes.

Document is highest level node and text is lowest level node.

All these nodes together form up a node tree and are related to each other.

Node properties All nodes present in the node hierarchy

contain certain properties: nodeName: represents the name of the node. It

contains the tag name of the HTML element in upper case.

nodeValue: represents the text contained within the node. This property is only available for attribute nodes and not for document and element nodes.

nodeType: represents the type of the node. For example, the document node, element node, and so on.

window object DOM provides various objects to access and

manipulate HTML elements in a standard way. The window object is the top level object in the JavaScript hierarchy. The window object represents a browser window.

window properties: defaultStatus: specifies or retrieves the default text to

be displayed in the status bar of the browser window. closed: determines whether window is closed. document: represents an HTML document that contains

different elements. history: contains history of the visited Uniform

Resource Locators. location: contains the content of the specified URL. name: specifies or retrieves the name of the window. parent: retrieves the parent window that contains the

child windows and elements.

window methods alert(): displays an alert box that states the message and

an OK button. close(): closes the current window. confirm(): prompts a dialog box that display a message with

the OK and Cancel button. creatPopup(): creates a pop-pup window. focus(): focuses the current windows. open(): opens specified file in a new browser window. prompt(): prompts a dialog box that accepts input from the

user. print(): prints the content contained within the current

element. setInterval(): repeatedly invokes a function or evaluates

an expression after the specified time intervals (in milliseconds).

setTimeout(): invokes a function after the specified time only once.

window object - Demo

Demo:S12_Window.html

document object The document object is one of the basic JavaScript

object. It represents the entire HTML document. It provides access to another elements such links, and so on. Each HTML page has only one document object. This object is created when you use the BODY element.

Collections: the document object uses a collection of arrays that contain information about the document content.

anchors[]: contains information about the anchors contained in a document.

forms[]: contains information about the form contained in a document.

images[]: contains information about the images contained in a document.

links[]: contains information about the links contained in a document.

document object

Properties of document object: body: provides accesses to the BODY element. cookie: specifies or retrieves all the cookies

associated with the current document. domain: retrieves the domain name of the

current document. title: specifies or retrieves the title of the

document.

document object Methods of document object:

close(): closes data stream and displays the data collected using the open() method.

getElementById(): retrieves collection of HTML elements by using the specified ID.

getElementsByName(): retrieves collection of HTML elements by using the specified name.

getElementsByTagName(): retrieves collection of HTML elements with the specified tag name.

open(): opens a stream to accept the output from write()or writeln() methods.

write(): writes the text to HTML expression to a document.

document object - Demo

Demo: S12_Document.html

form object The form accepts input from the user and sends the user data

for validation. JavaScript allows you to process and validate the form data. A single HTML document can contain multiple forms. The form object represents an HTML from. It is created when you use the FORM element.

Properties of the form object: action: Sets or returns the value of the action attribute in a

form. enctype: Sets or returns the value of the enctype attribute in a

form length: Returns the number of elements in a form . method: Sets or returns the value of the method attribute in a

form . name: Sets or returns the value of the name attribute in a

form . target: Sets or returns the value of the target attribute in a

form. Methods of the form object:

submit(): Submits the form data to the server. reset(): resets the form data to their default values.

form object - Demo

Demo: S12_Form.html

frame object Frames allow you to view multiple screens simultaneously. The

frame object represents the HTML frame. It is created when you use the FRAME element. A single browser window can contain multiple frames.

Properties of the frame object: frameBorder: Sets or returns the value of the frame border

attribute in a frame. marginHeight: Sets or returns the value of the margin

height attribute in a frame longDesc: Sets or returns the value of the longdesc attribute

in a frame marginWidth: Sets or returns the value of the marginwidth

attribute in a frame name: Sets or returns the value of the name attribute in a

frame noResize: Sets or returns the value of the noresize attribute

in a frame src: Sets or returns the value of the src attribute in a frame id: Secifies or retrieves the ID of a frame.

frame object - Demo

Demo: S12_FrameDemo.html – S12_Frame.html

history object The history object is a part of the window

object. It contains a set of URLs visited by a user in a browser window.

The history object is an array that allows you to a particular URL by specifying its index number in the array. The length property allows you to determine the number of URLs in the history list.

Methods of the history object: back(): Loads the previous URL in the history list. forward(): Loads the next URL in the history list go(): Loads a specific URL from the history list

history object - Demo

Demo: S12_History.html

navigator object The navigator object contains information about

the browser used by the client. It allows you to retrieve information such as name, version number, and code name of browser.

Properties of the navigator object: appCodeName: Returns the code name of the browser. appName: Returns the name of the browser . appVersion: Returns the version information of the

browser. cookieEnable: Determines whether cookies are enabled

in the browser . platform: Returns for which platform the browser is

compiled userAgent: Returnsthe user-agent header sent by the

browser to the server.

navigator object - Demo

Demo: S12_Navigator.html

location object The location object allows you to access

complete information of URL loaded in browser window. It is a part of the window object. A single URL is composed of different positions such as the host name, port number, and so on.

Properties of the navigator object: hash: Returns the anchor portion of a URL. host: Returns the hostname and port of a URL. hostname: Returns the hostname of a URL. href: Returns the entire URL. pathname: Returns the path name of a URL . port: Returns the port number the server uses for a

URL. protocol: Returns the protocol of a URL. search: Returns the query portion of a URL.

location object Methods of the navigator object:

assign(): Loads a new document. reload(): Reloads the current

document. reload(): Replaces the current

document with a new one.

location object - Demo

Demo: S12_Location.html

Summary DOM is a standard technique that allows accessing

and manipulating HTML element through script. DOM provides various built-in objects to

dynamically access HTML elements: Window object, document object, form object, frame object, history object, navigator object, location object.

The window object is the top level object in the Javacript hierarchy. Window object represents the browser window.

Document object is one of the basic Javascript object. It represents the entire HTML document.

Summary… Form accept input from the user and sends

the user data for validation. Form object represents an HTML form.

Frame allows to view multiple screen simultaneously. The Frame object represent the HTML frame.

History object is a set of URLs visited by users in a browser window

Summary… Navigator object contain information about

the browser used by the client. Location object allows to access complete

information of the URL loaded in the browser window.