JavaScript - Document Object

Quiz

Window Document Object

The document object is a JavaScript object that provides the access to all elements of an HTML document. When the HTML document is loaded in the web browser, it creates a document object. It is the root of the HTML document.

The document object contains the various properties and methods you can use to get details about HTML elements and customize them.

The JavaScript document object is a property of the window object. It can be accessed using window.document syntax. It can also be accessed without prefixing window object.

JavaScript Document Object Properties

The JavaScript Document Object represents the entire HTML document, and it comes with several properties that allow us to interact with and manipulate the document. Some common Document object properties are as follows

document.title − Gets or sets the title of the document.
document.URL − Returns the URL of the document.
document.body − Returns the element of the document.
document.head − Returns the element of the document.
document.documentElement − Returns the element of the document.
document.doctype − Returns the Document Type Declaration (DTD) of the document.

These properties provide a way to access and modify different parts of the HTML document using JavaScript.

Example: Accessing the document title

In the example below, we use the document.title property to access the property odd the document.



    JavaScript - DOM Object 


   The title of the document is:

Output

The title of the document is: JavaScript - DOM Object

Example: Accessing the document URL

In the example below, we have used the document.URL property to access the current URL of the page.



    JavaScript - DOM Object 


   The URL of the document is:

Output

The URL of the document is: https://www.tutorialspoint.com/javascript/javascript_document_object.htm

JavaScript Document Object Methods

The JavaScript Document Object provides us with various methods that allow us to interact with and manipulate the HTML document. Some common Document object methods are as follows

getElementById(id) − Returns the element with the specified ID.
getElementsByClassName(className) − Returns a collection of elements with the specified class name.
getElementsByTagName(tagName) − Returns a collection of elements with the specified tag name.
createElement(tagName) − Creates a new HTML element with the specified tag name.
createTextNode(text) − Creates a new text node with the specified text.
appendChild(node) − Appends a node as the last child of a node.
removeChild(node) − Removes a child node from the DOM.
setAttribute(name, value) − Sets the value of an attribute on the specified element.
getAttribute(name) − Returns the value of the specified attribute on the element.

These methods enable us to dynamically manipulate the structure and content of the HTML document using JavaScript.

Example: Accessing HTML element using its id

In the example below, we use document.getElementById() method to access the DIV element with id "output" and then use the innerHTML property of the HTML element to display a message.

Output

Hello User! You have accessed the DIV element using its id.

Example: Adding an event to the document

In the example below, we use document.addEventListener() method to add a mouseover event to the document.



   
        Mouseover Event 
        Hover over here to change background color

Document Object Properties List

Here, we have listed all properties of the document object.

Property	Description
document.activeElement	To get the currently focused element in the HTML document.
adoptedStyleSheets	It sets the array of the newly constructed stylesheets to the document.
baseURI	To get the absolute base URI of the document.
body	To set or get the documents tag.
characterSet	To get the character encoding for the document.
childElementCount	To get a count of the number of child elements of the document.
children	To get all children of the document.
compatMode	To get a boolean value representing whether the document is rendered in the standard modes.
contentType	It returns the MIME type of the document.
cookie	To get the cookies related to the document.
currentScript	It returns the script of the document whose code is currently executing.
defaultView	To get the window object associated with the document.
designMode	To change the editability of the document.
dir	To get the direction of the text of the document.
doctype	To get the document type declaration.
documentElement	To get the element.
documentURI	To set or get the location of the document.
embeds	To get all embedded () elements of the document.
firstElementChild	To get the first child element of the document.
forms	It returns an array of elements of the document.
fullScreenElement	To get the element that is being presented in the full screen.
fullScreenEnabled	It returns the boolean value, indicating whether the full screen is enabled in the document.
head	It returns the tag of the document.
hidden	It returns a boolean value, representing whether the document is considered hidden.
images	It returns the collection of the elements.
lastElementChild	It returns the last child element of the document.
lastModified	To get the last modified date and time of the document.
links	To get the collection of all and elements.
location	To get the location of the document.
readyState	To get the current state of the document.
referrer	To get the URL of the document, which has opened the current document.
scripts	To get the collection of all