Suggest an edit

Improve this article

Refine the answer for “What is document?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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` |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts553 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.