HTML DOM
HTML DOM Complete Reference
This reference collects the most commonly used properties, methods, and collections of the document object in one place. Use it as a quick lookup while working with the DOM.
About the document Object
The document object is the root of the DOM and the entry point for all page manipulation in JavaScript. It exposes properties that describe the page, collections that group related elements, and methods that find, create, and modify nodes.
The table below lists the members you will reach for most often. Names ending in () are methods you call; the rest are properties or collections you read.
Common Document Properties
| Name | Description |
|---|---|
| activeElement | Returns the element that currently has focus |
| baseURI | Returns the absolute base URL of the document |
| body | Returns the <body> element |
| characterSet | Returns the character encoding of the document |
| charset | Deprecated alias for characterSet |
| cookie | Returns or sets the document's cookies |
| defaultView | Returns the window object of the document |
| designMode | Gets or sets whether the document is editable |
| doctype | Returns the Document Type Declaration node |
| documentElement | Returns the root <html> element |
| documentURI | Returns the location of the document as a string |
| domain | Returns the domain name of the document server |
| fullscreenElement | Returns the element currently shown in fullscreen |
| head | Returns the <head> element |
| hidden | Returns true if the document is not visible |
| lastModified | Returns the date and time the document was last modified |
| readyState | Returns the loading status of the document |
| referrer | Returns the URL of the page that linked to this one |
| title | Returns or sets the document title |
| URL | Returns the full URL of the document |
| visibilityState | Returns the visibility state of the document |
Common Document Collections
| Name | Description |
|---|---|
| anchors | Returns all <a> elements that have a name attribute |
| embeds | Returns all <embed> elements |
| forms | Returns all <form> elements |
| images | Returns all <img> elements |
| links | Returns all <a> and <area> elements with an href |
| scripts | Returns all <script> elements |
| styleSheets | Returns all stylesheets attached to the document |
| children | Returns the element's child elements |
Common Document Methods
| Name | Description |
|---|---|
| getElementById() | Returns the element with the given id |
| getElementsByClassName() | Returns elements with the given class name |
| getElementsByTagName() | Returns elements with the given tag name |
| getElementsByName() | Returns elements with the given name attribute |
| querySelector() | Returns the first element matching a CSS selector |
| querySelectorAll() | Returns all elements matching a CSS selector |
| createElement() | Creates a new element node |
| createAttribute() | Creates a new attribute node |
| createTextNode() | Creates a new text node |
| createComment() | Creates a new comment node |
| appendChild() | Adds a new child node to an element |
| removeChild() | Removes a child node from an element |
| replaceChild() | Replaces a child node with another |
| insertBefore() | Inserts a node before an existing child |
| cloneNode() | Creates a copy of a node |
| open() | Opens an output stream for writing |
| write() | Writes HTML or text to the document stream |
| writeln() | Writes text plus a newline to the stream |
| close() | Closes a stream opened with open() |
| hasFocus() | Returns true if the document has focus |
| addEventListener() | Attaches an event handler to the document |
| removeEventListener() | Removes an event handler from the document |
| getElementsByName() | Returns elements sharing a name attribute |
| createDocumentFragment() | Creates an empty document fragment |
| importNode() | Imports a node from another document |
| adoptNode() | Moves a node from another document into this one |
| normalize() | Merges adjacent text nodes and removes empty ones |
| elementFromPoint() | Returns the element at given coordinates |
Example
This runnable page uses several of the members from the tables above - title, images, forms, getElementById, and createElement - and reports what it found.
Example
<!DOCTYPE html>
<html>
<body>
<h1>DOM reference demo</h1>
<img src="a.png" alt=""><img src="b.png" alt="">
<form></form>
<button onclick="report()">Inspect the document</button>
<div id="out" style="margin-top:12px;"></div>
<script>
function report() {
const lines = [
"Title: " + document.title,
"Images: " + document.images.length,
"Forms: " + document.forms.length,
"URL: " + document.URL
];
const out = document.getElementById("out");
out.innerHTML = "";
lines.forEach(function (t) {
const p = document.createElement("p");
p.textContent = t;
out.appendChild(p);
});
}
</script>
</body>
</html>💡
Collections such as document.images and document.forms are live: they update automatically as the page changes, so re-reading length always gives the current count.
Key Takeaways
- The document object is the root entry point of the DOM.
- Properties describe the page; collections group related elements; methods find and build nodes.
- Names ending in () are methods you call.
- Live collections update automatically as the DOM changes.