What is document?

JavaScriptJunior~2 min read

In JavaScript, the document object is the main entry point to the DOM (Document Object Model). It represents the entire HTML page loaded in the browser, and lets you read, modify and control its content with code.

1. What document is

document is a global object that the browser creates automatically when it loads a page. It represents the root node of the DOM tree.

So if the HTML code looks like this:

javascript

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Then a DOM structure is created in the browser's memory, and document is the object through which you can access it.

2. Example:

javascript

console.log(document.title);          // prints the page title
console.log(document.body);           // <body>...</body>
console.log(document.URL);            // the page address
console.log(document.getElementById); // the function for accessing elements

document is the main interface for working with the entire page.

3. The main point: document is the "entrance to the DOM"

Through it you can:

search for elements (getElementById, querySelector, getElementsByClassName);
change their content (textContent, innerHTML);
create new nodes (createElement);
remove or move elements (remove, appendChild);
react to events (addEventListener);
work with attributes, styles and classes.

4. Usage examples

Get an element

javascript

const heading = document.querySelector("h1");
console.log(heading.textContent); // "Hello, world!"

Change the text

javascript

heading.textContent = "Hello there!";

Create and add an element

javascript

const p = document.createElement("p");
p.textContent = "This is a new paragraph";
document.body.appendChild(p);

Change the style

javascript

heading.style.color = "red";

Attach an event handler

javascript

document.querySelector("button").addEventListener("click", () => {
  alert("Button clicked!");
});

5. Main properties of the document object:

Property	What it does
`document.documentElement`	`<html>` - the root element
`document.head`	`<head>`
`document.body`	`<body>`
`document.title`	The page title
`document.URL`	The current URL
`document.cookie`	Access to cookies
`document.forms`	All forms on the page
`document.images`	All images
`document.links`	All links (`<a>`)

6. Main methods of document:

Method	Description
`getElementById(id)`	find an element by ID
`getElementsByClassName(name)`	all elements with a class
`getElementsByTagName(name)`	all elements with a tag
`querySelector(selector)`	the first element matching a CSS selector
`querySelectorAll(selector)`	all elements matching a CSS selector
`createElement(tag)`	create an element
`createTextNode(text)`	create a text node
`append()` / `appendChild()`	add an element
`remove()`	remove an element
`addEventListener(event, fn)`	listen for events

7. Relationship with window:

The document object lives inside the global window object.

javascript

console.log(window.document === document); // true

window is the entire browser window, including the tab, localStorage, history, and so on.
document is only the content of the current page.

In short:

What it is	An object representing the HTML document
Where it is created	Automatically when the page loads
What it does	Manages the DOM
Belongs to	`window.document`
Main methods	`querySelector`, `createElement`, `appendChild`, `addEventListener`

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.