Working with JavaScript DOM Objects

In this JavaScript tutorial, you will learn about DOM object – window, properties of window object, methods of window object, screen, properties of screen object, navigator, properties of navigator object, methods of navigator object, history, property of history object, methods of history object, location, properties of location object and methods of location object.

DOM stands for Document Object Model. Document Object Model or DOM is a set of objects that allow programmers scripts to integrate with the browser and work with documents, windows, forms, and other components.

The biggest feature that JavaScript has over basic HTML is that scripts can manipulate the web document and its contents. JavaScript can load a new page onto the browser, work with parts of the browser window and document, open new windows, and even modify text dynamically within the page. To work with the browser and documents, JavaScript uses a hierarchy of parent and child objects called the Document Object Model or DOM. These objects are organized into a tree-like structure, and represent all of the content and components of a web document.

All objects in JavaScript have properties and methods associated with them. Document Object Model has properties and methods associated with it. The properties of the Document Object Model are used to describe the web page or document and the methods of the Document Object Model are used for working with parts of the web page. A detailed study of these methods and properties will be made in the coming sections.

The HTML DOM is an abbreviation denoting the Document Object Model for HTML. It is a standard defined by W3C. The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents. Adding new elements or modifying the contents of the elements using DOM can manipulate HTML elements. HTML DOM is a language independent platform. DOM is technically separate from JavaScript and can be accessed using other scripting languages.

The following list denotes HTML DOM objects that are used for providing information about the environment of the user’s system. These objects are used to provide various information about the user’s environment like screen size, resolution, monitor depth, browser history, the URL, operating system, browser type, version, language and so on. The objects are:

• Window
• Screen
• Navigator
• History
• Location

Associated with each of these objects are properties and methods.

Window:

With respect to the hierarchy of JavaScript, the Window object is the top level object. The Window object denotes the browser window.

The following list gives some of the properties and methods of the Window object.

Properties of Window Object:

• closed
• document
• defaultStatus
• frames
• history
• length
• location
• name
• opener
• parent
• personalbar
• self
• status
• statusbar
• scrollbars
• top
• toolbar
• window
• innerWidth
• innerHeight
• outerWidth
• outerHeight
• pageXOffset
• pageYOffset
• screenX
• screenY
• screenLeft
• screenTop

Methods of Window Object:

• alert()
• blur()
• clearInterval()
• clearTimeout()
• close()
• confirm()
• createPopup()
• focus()
• moveBy()
• moveTo()
• open()
• print()
• prompt()
• resizeBy()
• resizeTo()
• scrollBy()
• scrollTo()
• setInterval()
• setTimeout()