1. JavaScript Objects
Session 12

2. Objectives
 Browser objects.
 Other browser objects.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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.

8. window object - Demo
Demo:
S12_Window.html

9. 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.

10. 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.

11. 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.

12. document object - Demo
Demo: S12_Document.html

13. 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.

14. form object - Demo
Demo: S12_Form.html

15. 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.

16. frame object - Demo
Demo: S12_FrameDemo.html – S12_Frame.html

17. 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

18. history object - Demo
Demo: S12_History.html

19. 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.

20. navigator object - Demo
Demo: S12_Navigator.html

21. 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.

22. 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.

23. location object - Demo
Demo: S12_Location.html

24. 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.

25. 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

26. 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.