JavaScript Document Object

Document Structure:

• The Document object represents the entire HTML document in the browser.
• It serves as an entry point to access and manipulate the document's elements, properties, and methods.

Accessing Elements:

• The Document object provides methods like getElementById(), getElementsByClassName(), getElementsByTagName(), and querySelector() to retrieve elements from the document.

Example: Accessing Elements

const elementById = document.getElementById('elementId');
const elementsByClass = document.getElementsByClassName('className');
const elementsByTag = document.getElementsByTagName('tagName');
const elementByQuery = document.querySelector('cssSelector');

Modifying Content:

• Document methods such as createElement(), appendChild(), removeChild(), and innerHTML allow dynamic modification of the document's structure and content.

Example: Modifying Content

const newElement = document.createElement('div');
newElement.textContent = 'New content';
document.body.appendChild(newElement);

Document Properties:

• The Document object exposes properties like title, URL, body, head, and forms, providing information and access to different parts of the document.

Example: Document Properties

console.log(document.title);
console.log(document.URL);
console.log(document.body);

Events:

• The Document object enables event handling through methods like addEventListener() and inline event attributes.
• It allows attaching event listeners to respond to user interactions and document lifecycle events.

Example: Event Handling

document.addEventListener('DOMContentLoaded', function() {
  console.log('Document is ready');
});

 

Key Points

• The Document object provides a powerful interface for accessing, manipulating, and interacting with the HTML document in JavaScript.
• It facilitates dynamic updates to the document's content, structure, and behavior, enhancing the user experience and interactivity of web pages.
• Understanding the Document object is essential for effective DOM manipulation and event handling in JavaScript applications.