Document

The JavaScript object representing the entire HTML document, providing methods and properties to access and manipulate the DOM.

Overview

The document object is the entry point to the DOM (Document Object Model). It represents the web page loaded in the browser and provides an interface to access and modify the HTML content, structure, and styles. Every HTML element, attribute, and piece of text in the page can be accessed through the document object.

Example

javascript
// Access elements
const element = document.getElementById('myId');
const elements = document.getElementsByClassName('myClass');
const query = document.querySelector('.selector');
const queryAll = document.querySelectorAll('div');

// Create elements
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello!';
newDiv.className = 'my-class';

// Append to document
document.body.appendChild(newDiv);

// Modify content
document.title = 'New Page Title';
document.body.style.background = '#f0f0f0';

// Access document properties
console.log(document.URL);
console.log(document.domain);
console.log(document.readyState);

// Query the document
const forms = document.forms;
const links = document.links;
const images = document.images;

Key Points

  • Entry point to the DOM
  • Provides methods to find/create/modify elements
  • Available globally as 'document'
  • Has properties like title, URL, cookie
  • Essential for DOM manipulation

Learn More