HTML DOM Document
Object
HTML DOM Nodes
In the HTML DOM (Document Object Model), every element is a node:
- The document is a document node.
- All HTML elements are element nodes.
- All HTML attributes are attribute nodes.
- Text inserted into an HTML element is a text node.
- Comments are comment nodes.
Document Object
When a browser loads an HTML document, it becomes a Document Object.
The Document object is the root node of the HTML document.
The Document object allows us to access all elements in the HTML page from scripts.
Tip: The Document object is part of the Window object and can be accessed via the window.document property.
Browser Support
All major browsers support the Document object.
Document Object Properties and Methods
The following properties and methods can be used on the HTML document:
Property / Method | Description |
---|---|
document.activeElement | Returns the currently focused element |
document.addEventListener() | Adds an event handler to the document |
document.adoptNode(node) | Adopts a node from another document into the current document |
document.anchors | Returns a reference to all Anchor objects in the document |
document.applets | Returns a reference to all Applet objects in the document. Note: HTML5 no longer supports the <applet> element. |
document.baseURI | Returns the absolute base URI of the document |
document.body | Returns the body element of the document |
document.close() | Closes the output stream previously opened with document.open() and displays the selected data |
document.cookie | Sets or returns all cookies associated with the document |
document.createAttribute() | Creates an attribute node |
document.createComment() | Creates a comment node |
document.createDocumentFragment() | Creates an empty DocumentFragment object and returns it |
document.createElement() | Creates an element node |
document.createTextNode() | Creates a text node |
document.doctype | Returns the Document Type Declaration (DTD) associated with the document |
document.documentElement | Returns the root node of the document |
document.documentMode | Returns the mode used by the browser to render the document |
document.documentURI | Sets or returns the location of the document |
document.domain | Returns the domain name of the document |
document.domConfig | Obsolete. Returns the configuration used when normalizeDocument() is called |
document.embeds | Returns a collection of all embedded content (embed) in the document |
document.forms | Returns a reference to all Form objects in the document |
document.getElementsByClassName() | Returns a collection of elements with a specified class name, as a NodeList object |
document.getElementById() | Returns a reference to the first object with the specified id |
document.getElementsByName() | Returns a collection of objects with the specified name |
document.getElementsByTagName() | Returns a collection of objects with the specified tag name |
document.images | Returns a reference to all Image objects in the document |
document.implementation | Returns the DOMImplementation object that handles this document |
document.importNode() | Copies a node from another document into this document |
document.inputEncoding | Returns the encoding used for the document (at the time of parsing) |
document.lastModified | Returns the date and time the document was last modified |
document.links | Returns a reference to all Area and Link objects in the document |
document.normalize() | Removes empty text nodes and joins adjacent nodes |
document.normalizeDocument() | Removes empty text nodes and joins adjacent nodes |
document.open() | Opens a stream to collect output from document.write() or document.writeln() methods |
document.querySelector() | Returns the first element in the document that matches the specified CSS selector |
document.querySelectorAll() | Returns all elements in the document that match the specified CSS selector, as a NodeList object |
document.readyState | Returns the loading status of the document |
document.referrer | Returns the URL of the document that loaded the current document |
document.removeEventListener() | Removes an event handler from the document (added with addEventListener()) |
document.renameNode() | Renames an element or attribute node |
document.scripts | Returns a collection of all script elements in the document |
document.strictErrorChecking | Sets or returns whether error checking is enforced |
document.title | Returns the title of the current document |
document.URL | Returns the complete URL of the document |
document.write() | Writes HTML expressions or JavaScript code to a document |
document.writeln() | Same as write(), but adds a newline character after each statement |
Warning !!!
In the W3C DOM Core, the document object inherits all properties and methods from the node object.
Many properties and methods do not make sense in the context of a document.
HTML Document Object should avoid using these node object properties and methods:
Property / Method | Reason to Avoid |
---|---|
document.attributes | The document does not have this property |
document.hasAttributes() | The document does not have this property |
document.nextSibling | The document does not have a next node |
document.nodeName | This is usually #document |
document.nodeType | This is usually 9 (DOCUMENT_NODE) |
document.nodeValue | The document does not have a node value |
document.ownerDocument | The document does not have a master document |
document.ownerElement | The document does not have its own node |
document.parentNode | The document does not have a parent node |
document.previousSibling | The document does not have sibling nodes |
document.textContent | The document does not have text nodes |