- Document: all property
- Value
- Special type conversion behavior
- Specifications
- Browser compatibility
- Found a content problem with this page?
- JavaScript HTML DOM Document
- The HTML DOM Document Object
- Finding HTML Elements
- Changing HTML Elements
- Adding and Deleting Elements
- Adding Events Handlers
- Finding HTML Objects
- JavaScript HTML DOM
- The HTML DOM (Document Object Model)
- The HTML DOM Tree of Objects
- What You Will Learn
- What is the DOM?
- What is the HTML DOM?
- HTML DOM Documents
- Examples
- Document Object Properties and Methods
Document: all property
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
The Document interface’s read-only all property returns an HTMLAllCollection rooted at the document node. In other words, it returns all of the document’s elements, accessible by order (like an array) and by ID (like a regular object).
Value
An HTMLAllCollection which contains every element in the document.
Special type conversion behavior
For historical reasons, document.all is an object that in many ways behaves like undefined . Specifically:
These special behaviors ensure that code like:
if (document.all) // Assume that we are in IE; provide special logic > // Assume that we are in a modern browser
Will continue to provide modern behavior even if the code is run in a browser that implements document.all for compatibility reasons.
However, in all other contexts, document.all remains an object. For example:
- It is not strictly equal to either undefined or null .
- When used on the left-hand side of the nullish coalescing operator ( ?? ) or the optional chaining operator ( ?. ), it will not cause the expression to short-circuit.
Specifications
Browser compatibility
BCD tables only load in the browser
Found a content problem with this page?
This page was last modified on Jun 20, 2023 by MDN contributors.
Your blueprint for a better internet.
JavaScript HTML DOM Document
The HTML DOM document object is the owner of all other objects in your web page.
The HTML DOM Document Object
The document object represents your web page.
If you want to access any element in an HTML page, you always start with accessing the document object.
Below are some examples of how you can use the document object to access and manipulate HTML.
Finding HTML Elements
| Method | Description |
|---|---|
| document.getElementById(id) | Find an element by element id |
| document.getElementsByTagName(name) | Find elements by tag name |
| document.getElementsByClassName(name) | Find elements by class name |
Changing HTML Elements
| Property | Description |
|---|---|
| element.innerHTML = new html content | Change the inner HTML of an element |
| element.attribute = new value | Change the attribute value of an HTML element |
| element.style.property = new style | Change the style of an HTML element |
| Method | Description |
| element.setAttribute(attribute, value) | Change the attribute value of an HTML element |
Adding and Deleting Elements
| Method | Description |
|---|---|
| document.createElement(element) | Create an HTML element |
| document.removeChild(element) | Remove an HTML element |
| document.appendChild(element) | Add an HTML element |
| document.replaceChild(new, old) | Replace an HTML element |
| document.write(text) | Write into the HTML output stream |
Adding Events Handlers
| Method | Description |
|---|---|
| document.getElementById(id).onclick = function()code> | Adding event handler code to an onclick event |
Finding HTML Objects
The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.
Later, in HTML DOM Level 3, more objects, collections, and properties were added.
| Property | Description | DOM |
|---|---|---|
| document.anchors | Returns all elements that have a name attribute | 1 |
| document.applets | Deprecated | 1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Returns the element | 1 |
| document.cookie | Returns the document’s cookie | 1 |
| document.doctype | Returns the document’s doctype | 3 |
| document.documentElement | Returns the element | 3 |
| document.documentMode | Returns the mode used by the browser | 3 |
| document.documentURI | Returns the URI of the document | 3 |
| document.domain | Returns the domain name of the document server | 1 |
| document.domConfig | Obsolete. | 3 |
| document.embeds | Returns all elements | 3 |
| document.forms | Returns all elements | 1 |
| document.head | Returns the element | 3 |
| document.images | Returns all | 1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Returns the document’s encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all and elements that have a href attribute | 1 |
| document.readyState | Returns the (loading) status of the document | 3 |
| document.referrer | Returns the URI of the referrer (the linking document) | 1 |
| document.scripts | Returns all elements | 3 |
| document.strictErrorChecking | Returns if error checking is enforced | 3 |
| document.title | Returns the element | 1 |
| document.URL | Returns the complete URL of the document | 1 |
JavaScript HTML DOM
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
The HTML DOM Tree of Objects
With the object model, JavaScript gets all the power it needs to create dynamic HTML:
- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can remove existing HTML elements and attributes
- JavaScript can add new HTML elements and attributes
- JavaScript can react to all existing HTML events in the page
- JavaScript can create new HTML events in the page
What You Will Learn
In the next chapters of this tutorial you will learn:
- How to change the content of HTML elements
- How to change the style (CSS) of HTML elements
- How to react to HTML DOM events
- How to add and delete HTML elements
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
«The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.»
The W3C DOM standard is separated into 3 different parts:
- Core DOM — standard model for all document types
- XML DOM — standard model for XML documents
- HTML DOM — standard model for HTML documents
What is the HTML DOM?
The HTML DOM is a standard object model and programming interface for HTML. It defines:
- The HTML elements as objects
- The properties of all HTML elements
- The methods to access all HTML elements
- The events for all HTML elements
In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
HTML DOM Documents
When an HTML document is loaded into a web browser, it becomes a document object.
The document object is the root node of the HTML document.
The document object is a property of the window object.
The document object is accessed with:
window.document or just document
Examples
Document Object Properties and Methods
The following properties and methods can be used on HTML documents:
| Property / Method | Description |
|---|---|
| activeElement | Returns the currently focused element in the document |
| addEventListener() | Attaches an event handler to the document |
| adoptNode() | Adopts a node from another document |
| anchors | Deprecated |
| applets | Deprecated |
| baseURI | Returns the absolute base URI of a document |
| body | Sets or returns the document’s body (the element) |
| charset | Deprecated |
| characterSet | Returns the character encoding for the document |
| close() | Closes the output stream previously opened with document.open() |
| cookie | Returns all name/value pairs of cookies in the document |
| createAttribute() | Creates an attribute node |
| createComment() | Creates a Comment node with the specified text |
| createDocumentFragment() | Creates an empty DocumentFragment node |
| createElement() | Creates an Element node |
| createEvent() | Creates a new event |
| createTextNode() | Creates a Text node |
| defaultView | Returns the window object associated with a document, or null if none is available. |
| designMode | Controls whether the entire document should be editable or not. |
| doctype | Returns the Document Type Declaration associated with the document |
| documentElement | Returns the Document Element of the document (the element) |
| documentMode | Deprecated |
| documentURI | Sets or returns the location of the document |
| domain | Returns the domain name of the server that loaded the document |
| domConfig | Deprecated |
| embeds | Returns a collection of all elements the document |
| execCommand() | Deprecated |
| forms | Returns a collection of all elements in the document |
| getElementById() | Returns the element that has the ID attribute with the specified value |
| getElementsByClassName() | Returns an HTMLCollection containing all elements with the specified class name |
| getElementsByName() | Returns an live NodeList containing all elements with the specified name |
| getElementsByTagName() | Returns an HTMLCollection containing all elements with the specified tag name |
| hasFocus() | Returns a Boolean value indicating whether the document has focus |
| head | Returns the element of the document |
| images | Returns a collection of all |
| implementation | Returns the DOMImplementation object that handles this document |
| importNode() | Imports a node from another document |
| inputEncoding | Deprecated |
| lastModified | Returns the date and time the document was last modified |
| links | Returns a collection of all and elements in the document that have a href attribute |
| normalize() | Removes empty Text nodes, and joins adjacent nodes |
| normalizeDocument() | Deprecated |
| open() | Opens an HTML output stream to collect output from document.write() |
| querySelector() | Returns the first element that matches a specified CSS selector(s) in the document |
| querySelectorAll() | Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document |
| readyState | Returns the (loading) status of the document |
| referrer | Returns the URL of the document that loaded the current document |
| removeEventListener() | Removes an event handler from the document (that has been attached with the addEventListener() method) |
| renameNode() | Deprecated |
| scripts | Returns a collection of elements in the document |
| strictErrorChecking | Deprecated |
| title | Sets or returns the title of the document |
| URL | Returns the full URL of the HTML document |
| write() | Writes HTML expressions or JavaScript code to a document |
| writeln() | Same as write(), but adds a newline character after each statement |