Document Objects

In JavaScript, the document object represents the HTML document that is currently loaded in the browser. It provides methods and properties that allow you to interact with the document, such as accessing and modifying its content, structure, and styles. The document object is automatically created by the browser and is available to all JavaScript code running in the browser.

Accessing the Document Object

You can access the document object in JavaScript using the document property of the window object. For example, you can use the document object to get the title of the document:

let documentTitle = document.title;
console.log(documentTitle);

This will output the title of the document.

Properties of the Document Object

The document object has many properties that provide information about the document. Some of the commonly used properties are:

document.title: Returns the title of the document.
document.URL: Returns the URL of the document.
document.body: Returns the <body> element of the document.
document.head: Returns the <head> element of the document.
document.documentElement: Returns the <html> element of the document.

You can access these properties using the document object. For example, to get the title of the document, you can use document.title.

Methods of the Document Object

The document object also has many methods that allow you to interact with the document. Some of the commonly used methods are:

document.getElementById(): Returns the element with the specified ID.
document.getElementsByClassName(): Returns a collection of elements with the specified class name.
document.getElementsByTagName(): Returns a collection of elements with the specified tag name.
document.querySelector(): Returns the first element that matches a specified CSS selector.
document.querySelectorAll(): Returns a collection of elements that match a specified CSS selector.

You can call these methods using the document object. For example, to get an element by its ID, you can use document.getElementById('myElement').

Examples

Here are some examples of using the document object:

// Get the the element with ID "myElement"
let element = document.getElementById("myElement");
element.innerHTML = "Hello, World!";

This will set the inner HTML of the element with ID "myElement" to "Hello, World!".

// Get all elements with class "myClass"
let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {
  elements[i].style.color = "red";
}

This will set the text color of all elements with class "myClass" to red.

// create a new element (div) and append it to the body
let newElement = document.createElement("div");
newElement.innerHTML = "New Element";
document.body.appendChild(newElement);

This will create a new <div> element with the text "New Element" and append it to the <body> of the document.

Conclusion

The document object represents the HTML document that is currently loaded in the browser.
You can access the document object using the document property of the window object.
The document object has properties and methods that allow you to interact with the document, such as accessing and modifying its content, structure, and styles.
Some commonly used properties of the document object are document.title, document.URL, document.body, document.head, and document.documentElement.
Some commonly used methods of the document object are document.getElementById(), document.getElementsByClassName(), document.getElementsByTagName(), document.querySelector(), and document.querySelectorAll().
You can use the document object to access and modify elements in the document, create new elements, and more.
The document object is a powerful tool for working with the HTML document in JavaScript.

CoderrShyam