What is JavaScript Document Object?

The JavaScript Document object in JavaScript represents the HTML document loaded in a web page. It is part of the Window object and provides various properties and methods to manipulate the elements, styles, and content of the webpage.

1. Accessing elements:
The Document object provides methods to access the different elements present in the document, such as getElementById, getElementsByClassName, getElementsByTagName, etc. For example:
var element = document.getElementById("myElement");

This retrieves the element with the ID "myElement" from the HTML document.

2. Modifying element content:
The Document object has properties and methods to modify the content of an element. For instance, the innerHTML property allows you to get or set the HTML content of an element. Example:

var element = document.getElementById("myElement");
element.innerHTML = "<p>New content</p>";


This sets new HTML content for the element with the ID "myElement".

3. Modifying element attributes:
You can modify the attributes of an element using the setAttribute method of the Document object. For example:

var element = document.getElementById("myElement");
element.setAttribute("class", "newClass");


This sets the class attribute of the element with the ID "myElement" to "newClass".

4. Creating new elements:
You can create new elements using the createElement method of the Document object. Example:

var newElement = document.createElement("div");
newElement.textContent = "Newly created element";


This creates a new div element and sets its text content.

5. Appending elements:
The Document object has methods to append new elements to the document. For example, you can use the appendChild method to add a new element as a child of another element. Example:

var parentElement = document.getElementById("parentElement");
parentElement.appendChild(newElement);


This appends the newElement as a child of the element with the ID "parentElement".

6. Querying elements using selectors:
The Document object provides methods to query elements based on CSS selectors. For example, the querySelector method allows you to select the first element that matches a given selector. Example:

var element = document.querySelector(".myClass");


This selects the first element with the class "myClass" from the document.

7. Adding event listeners:
You can add event listeners to elements using the addEventListener method of the Document object. Example:

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked");
});


This adds an event listener to the button element with the ID "myButton" that logs a message when it is clicked.

8. Changing element styles:
The Document object provides access to the CSS styles of elements through the style property. Example:

var element = document.getElementById("myElement");
element.style.color = "red";


This changes the color of the element with the ID "myElement" to red.

These are just a few examples of the capabilities of the Document object in JavaScript. The Document object provides many other properties and methods to interact with the HTML document and its elements.

See Demo | Download File