Javascript Dom Objects

DOM Objects

By : Nivarutti Patil

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 HTML documents. All HTML elements, along with their containing text and attributes, can be accessed through the DOM. The contents 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.

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 the msg. close () close the current window. You must write window.close() for this command to be recognized in the JavaScript. confirm (messageText) Pops up a message box with messageText displayed, along with buttons for OK and CANCEL. open ( url, name, featurelist ) Opens a new window , populated by URL , with the target name if the window, and whichever features are identified in the feature list

Window Object Continued.. ¾

Methods ƒ

ƒ

ƒ

prompt ( messageText, response) Pops up a message box displaying messageText with text ox for the user’s response, Which contain a response if not left empty . if left empty , the word “undefined” is displayed in the textbox setTimeout(expression, time) Executes an expression after the elapse of the interval time , an integer value representing milliseconds. clearTimeout(TimerID) If the setTimeout to which this refers was given a timerID, this would clear the timeout.

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 for the window object. The following are event handlers for the document object. ƒ ƒ ƒ ƒ ƒ ƒ ƒ

onClick onDblClick onKeyDown onKeyPress onKeyUp onMouseDown onMouseUp

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 in the 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"

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 the document. 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”

ƒ

ƒ

ƒ

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 a carriage return (Pre)

History Object ¾ ¾ ¾

contains properties representing URLs the client has previously requested. The history object contains a list of strings representing the URLs the client has visited. Methods ƒ

back() - Go to the previous URL entry in the history list. This does the same 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 when there is a next document in the history list. The back function or browser back button must have previously been used for this function to work.

ƒ

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

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.

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.

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 is passed 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 the server contents may be different from your cache.

ƒ

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

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 that a 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

Form Object Continued.. ¾ ¾

Event Handlers of the form Object The form object has two event handlers, onSubmit() and onReset().

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.

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 index numbers. Properties ƒ ƒ ƒ

¾

The checked property. The length property. The value property.

The click() method.