8/14/2019 JavaScript Dom Objects

1/16

DOM Objects

By : Nivarutti Patil

8/14/2019 JavaScript Dom Objects

2/16

The HTML DOM

The HTML DOM is a W3C standard and it is an

abbreviation for the Document Object Model for HTML.

The HTML DOM defines a standard set of objects for HTML,and a standard way to access and manipulate HTMLdocuments.

All HTML elements, along with their containing text andattributes, can be accessed through the DOM. Thecontents can be modified or deleted, and new elements

can be created. The HTML DOM is platform and language independent. It

can be used by any programming language like Java,JavaScript, and VBScript.

8/14/2019 JavaScript Dom Objects

3/16

Window Object

The windows objects is the highest level object in the JavaScript object

hierarchy. It is also the default object. Methods

alert (message text): Pops up a window with messageText as themsg.

close () close the current window. You must write window.close() forthis command to be recognized in the JavaScript.

confirm (messageText) Pops up a message box with messageTextdisplayed, along with buttons for OK and CANCEL.

open ( url, name, featurelist ) Opens a new window , populated byURL , with the target name if the window, and whichever featuresare identified in the feature list

8/14/2019 JavaScript Dom Objects

4/16

Window Object Continued..

Methods

prompt ( messageText, response) Pops up a message boxdisplaying messageText with text ox for the users response, Whichcontain a response if not left empty . if left empty , the wordundefined is displayed in the textbox

setTimeout(expression, time) Executes an expression after theelapse of the interval time , an integer value representingmilliseconds.

clearTimeout(TimerID) If the setTimeout to which this refers was

given a timerID, this would clear the timeout.

8/14/2019 JavaScript Dom Objects

5/16

Document Object

The document object is subordinate to the window objects in the window

hierarchy. The document object provides the properties and methods to work with

many aspects of the current document.

The document object is defined when tag is evaluated in the

HTML page. Event handlers The onBlur, onFocus, onLoad, and onUnload event

handlers are specified in the BODY tag but are actually event handlers forthe window object.

The following are event handlers for the document object. onClick

onDblClick

onKeyDown

onKeyPress

onKeyUp onMouseDown

onMouseUp

8/14/2019 JavaScript Dom Objects

6/16

Document Object Continued..

Properties

alinkColor: String, Specifies the ALINK attribute.

Syntax: document.alinkColor = "colorinfo"

anchors: Array of anchor objects, contains an entry for each anchor inthe document.

Syntax: document.anchors["anchorID"]

bgcolor: String, Specifies the BGCOLOR attribute

Syntax: document.bgColor = "colorinfo

fgcolor: String, Specifies the TEXT attribute.

Syntax: document.fgColor = "colorinfo" forms: Array of Form objects, Contains an entry for each form in the

document

Syntax: document.forms["formID"]

linkColor: String, Specifies the LINK attribute.Syntax: document.linkColor = "colorinfo"

8/14/2019 JavaScript Dom Objects

7/16

Document Object Continued..

Properties

lastModified: String, Specifies the date the document was last modified.

Syntax: document.lastModified

links: Array of Link objects, contains an entry for each link in thedocument.

Syntax: document.links["linkID"]

referrer:String, Specifies the URL of the calling

document.

Syntax: document.referrer

title: String, Specifies the contents of the TITLE tag.Syntax: document.title

vlinkColor: String, Specifies the VLINK attribute.

Syntax: document.vlinkColor = "colorinfo

8/14/2019 JavaScript Dom Objects

8/16

Document Object Continued..

Methods

Clear(): Clears the document window.

Close(): Closes a write stream.

Open(): Opens the documents to receive data form a write stream.

Write(content): Writes the text of content to the document

Writeln():Writes the text of content to the document, followed by acarriage return (Pre)

8/14/2019 JavaScript Dom Objects

9/16

History Object

contains properties representing URLs the client has previously

requested.

The history object contains a list of strings representing the URLs theclient has visited.

Methods

back() - Go to the previous URL entry in the history list. This does thesame thing as the browser back button.

forward()- Go to the next URL entry in the history list. This does the

same thing as the browser forward button. This is only effective whenthere is a next document in the history list. The back function or browserback button must have previously been used for this function to work.

go(relPos | string) - This function will accept an integer or a string. If aninteger is used, the browser will go forward or back (if the value isnegative) the number of specified pages in the history object (if therequested entry exists in the history object)

8/14/2019 JavaScript Dom Objects

10/16

History Object Continued..

Properties

current - The current document URL.

length - The number of entries in the history object.

next - The URL of the next document in the history object.

previous - The URL of the last document in the history object.

8/14/2019 JavaScript Dom Objects

11/16

Location Object

The JavaScript location object is a property of the window object. It can

be used to control the web page displayed by the browser.

Contains information on the current URL. In general, a URL has this form:

(protocol//host:port/pathname#hash?keyword

Properties

hash: Specifies an anchor name in the URL.

host: Specifies the host and domain name, or IP address, of a network

host.

hostname Specifies the host:port portion of the URL.

href: Specifies the entire URL.

pathname: Specifies the URL-path portion of the URL.

port: Specifies the communications port that the server uses.

protocol: Specifies the beginning of the URL, including the colon.

8/14/2019 JavaScript Dom Objects

12/16

Location Object Continued..

The JavaScript location object is a property of the window object. It can

be used to control the web page displayed by the browser.

Methods

reload() - The current window document is reloaded. If a value of true ispassed to the reload function, the reload is forced to do an HTTP GET of

the document. This is not normally done but is useful when you think theserver contents may be different from your cache.

replace(URL) - Requires a URL as a parameter. It loads the document atthe URL on top of the current document. A new entry entry is not placedin the history object.

8/14/2019 JavaScript Dom Objects

13/16

Form Object

Forms enable you to obtain user input by using a range of interface tools,

including text fields, checkboxes, radio button,etc.

You create an HTML form by enclosing all form elements in the.... tag. The opening form tag indicates thata form is beginning and the closing form tag marks the end of

the form element. The tag includes five attributes and the onSubmit event handler

associated with it.

The ACTION Attribute

The METHOD Attribute

The TARGET and the NAME Attributes

Properties

The elements array. This is an array of objects for referencing each

element in the form.document.form1.elements[0]

Others are similar to attributes

8/14/2019 JavaScript Dom Objects

14/16

Form Object Continued..

Event Handlers of the form Object

The form object has two event handlers, onSubmit() and onReset().

8/14/2019 JavaScript Dom Objects

15/16

text and TextArea Object

The text Object

The text object defines the text fields in forms.

Properties

The defaultValue property.

document.testForm.firstName.defaultValue="Michael"

The value property.

Methods

focus, blur, and select.

8/14/2019 JavaScript Dom Objects

16/16

radio and checkbox Object

The radio object is used to define a radio button in a form. The individual

radio button in a group of radio buttons is referenced by the indexnumbers.

Properties

The checked property.

The length property.

The value property.

The click() method.