The `document` Object: Your Page's API
The document object is the root of the DOM tree, representing the entire webpage in your script. Use it to find elements (getElementById), create new ones (createElement), or read page info. The main footgun: accessing an element before it's been parsed.
Why it exists
To provide a programmatic interface for scripts to interact with a web page's content. Without it, JavaScript would be isolated from the static HTML and couldn't create dynamic, interactive experiences. The document object bridges the gap between the markup and the running script.
The mental model
The document object is the root of a tree structure called the DOM (Document Object Model). Think of your HTML page as this tree. Every element, like <body>, , and , is a branch or leaf. The document object is your handle to the entire tree, letting you access and change any part of it.
How it works
When a browser loads a webpage, it parses the HTML and creates the document object, making it globally available to your JavaScript. This object has properties that point to key elements (like document.body) and methods for querying and manipulating the page. For example, document.getElementById('main-content') searches the entire document tree for an element with that specific ID and returns it.
When to use it
Use it for nearly any interaction with the page's content. Common tasks include: finding an element to attach an event listener (document.querySelector), changing the text or style of an element, creating new elements to add to the page (document.createElement), or reading information about the page like its URL (document.documentURI).
When not to use it
The document object is for the content of a single page. It's not for browser-level actions. For navigating to a new URL, use window.location. For managing browser history, use window.history. For making network requests, use fetch. The document object lives on the window global object, but they have distinct responsibilities.
One canonical example
A classic use case is making a button interactive. First, you get the button element from the document: const myButton = document.getElementById('submit-btn');. Then, you use that element object to listen for clicks and react: myButton.addEventListener('click', () => { document.body.style.backgroundColor = 'lightblue'; });. This connects your script to a specific piece of HTML via the document object to manipulate another part of the page.
Interview question
Which task is NOT primarily handled by the `document` object in JavaScript?
- a.Creating a new HTML element to add to the page.
- b.Modifying the style of an existing HTML element.
- c.Locating a specific element within the webpage's structure.
- d.Redirecting the browser to a different web address.Correct
Why? this is the answer
The `document` object is for interacting with the page's content and structure, such as modifying elements, creating new ones, or finding existing elements. Navigating to a new URL is a browser-level action handled by the `window.location` object, not the `document` object.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on web apis — each one lists the topics its interview covers.
See open roles