Upload
jajupreetam
View
224
Download
0
Embed Size (px)
Citation preview
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.