Signup/Sign In

JavaScript Document Object

JavaScript Document object is an object that provides access to all HTML elements of a document. When an HTML document is loaded into a browser window, then it becomes a document object.

The document object stores the elements of an HTML document, such as HTML, HEAD, BODY, and other HTML tags as objects.

A document object is a child object of the Window object, which refers to the browser.

You can access a document object either using window.document property or using object directly.

See, What we can do with Document Object:

  • Suppose you have created a FORM in an HTML document using the FORM element and added some text fields and Buttons on the Form. On Submitting the Form you want to validate the input or display input on another page. In this situation, you can use a document object which is a child object of the window object. Using the document object, you can access the elements of the form and validate the Input.

  • The Document Object provides different collection elements, such as anchor and Links which helps you to count the number of specific elements on a form.

  • The Document Object also provides various properties such as URL, bgcolor, etc. which will allow you to retrieve the details of a document and various methods such as open(), close(), write(), getElementById(), getElementByName(), etc. which allow you to perform various tasks like opening an HTML document to display output and writing a text on Web Page.

  • The Document Object also allows you to create cookies for a webpage by providing a property named cookie. A cookie stores information about the user's computer, which helps in accessing visited websites.

Now let's explore document object methods and properties.

JavaScript Document Object Properties

As we know, a property of an object is the value associated with the object. The property is accessed by using the following notation:

objectName.propertyName

where objectName is the name of the object and propertyName is the name of its property.

Now we will show you the properties of document object in the table given below:

Properties Description
cookie returns a report that contains all the visible and unexpired cookies associated with the document
domain returns the domain name of the server from which the document has originated
lastModified returns the date on which document was last modified
documentMode returns the mode used by the browser to process the document
readyState returns the loading status of the document.
referrer returns the URL of the documents referred to in an HTML document
title returns the name of the HTML document defined between the starting and ending tags of the TITLE element
URL returns the full URL of the HTML document.

Let's take an example, to see the document object properties in action:

JavaScript Document Object Methods

JavaScript Document object also provides various methods to access HTML elements.

Now we will show you some of the commonly used methods of the document object:

Methods Description Syntax
open() opens an HTML document to display the output
document.open(mimetype, replace)

close() closes an HTML document
document.close()

write() Writes HTML expressions or JavaScript code into an HTML document
document.write(exp1, exp2, ...)

writeln() write a new line character after each HTML expressions or JavaScript Code
document.writeln(exp1, exp2, ...)

getElementById() returns the reference of first element of an HTML document with the specified id.
document.getElementById(id)

getElementByName() returns the reference of an element with the specified name
document.getElementsByName(name)

getElementsByTagName() returns all elements with the specified tagname
document.getElementsByTagName(tagname)

Now let's take an example, to see the document object methods like open(), write(), and getElementById() to explain their usage. See the below example:

Also Read :- How to Build a Discord Bot using JavaScript



About the author:
I like writing content about C/C++, DBMS, Java, Docker, general How-tos, Linux, PHP, Java, Go lang, Cloud, and Web development. I have 10 years of diverse experience in software development. Founder @ Studytonight