LAST UPDATED: MARCH 22, 2021
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
