HTML DOM Document Object
HTML DOM node
In HTML DOM (Document Object Model), every element is a node :
A document is a document node.
All HTML elements are element nodes.
All HTML attributes are attribute nodes.
Text inserted into HTML elements are text nodes.
Comments are comment nodes.
Document object
When the browser loads the HTML document, it becomes the Document object .
The Document object is the root node of the HTML document.
The Document object allows us to access all the elements in the HTML page from script.
Tip: The Document object is part of the Window object and can be accessed through the window.document property.
Browser supports
All major browsers support the Document object.
Document object properties and methods
The following attributes and methods can be used in HTML documents:
| Property / Method | Description |
|---|---|
| document.activeElement | Return the element that is currently in focus |
| document.addEventListener() | Add a envent handle to the document |
| document.adoptNode(node) | Return the adapded node from another document to the current document. |
| document.anchors | Return references to all Anchor objects in a document. |
| document.applets | Return references to all Applet objects in a document. Note: <applet> elements are no longer supported in HTML5. |
| document.baseURI | Return the absolute base URI of a document |
| document.body | Return the body element of the document |
| document.close() | Close the output stream opened with the document.open() method and displays the selected data. |
| document.cookie | Set or return all cookies related to the current document. |
| document.createAttribute() | Create a attribute node |
| document.createComment() | CreateComment() method creates a comment node. |
| document.createDocumentFragment() | Create an empty DocumentFragment object and returns this object. |
| document.createElement() | Create an element node. |
| document.createTextNode() | Create a text node. |
| document.doctype | Return a document type declaration (DTD) related to a document. |
| document.documentElement | Return the root node of a document |
| document.documentMode | Return the mode used to render a document through the browser |
| document.documentURI | Set or return the position of the document |
| document.domain | Return the domain name of the current document. |
| document.domConfig | Deprecated. Return the configuration used when normalizeDocument() was called. |
| document.embeds | Return a collection of all embedded content (embeds) in a document |
| document.forms | Return references to all Form objects in the document. |
| document.getElementsByClassName() | Return a collection of all elements in the document with the specified class name as a NodeList object. |
| document.getElementById() | Return a reference to the first object that has the specified id. |
| document.getElementsByName() | Return a collection of objects with the specified name. |
| document.getElementsByTagName() | Return a collection of objects with the specified tag name. |
| document.images | Return references to all Image objects in the document. |
| document.implementation | Return the DOMImplementation object that processes the document. |
| document.importNode() | Copy a node from another document to that document for application. |
| document.inputEncoding | Return the encoding used for the document (at parsing time). |
| document.lastModified | Return the date and time that the document was last modified. |
| document.links | Return references to all Area and Link objects in the document. |
| document.normalize() | Delete the empty text node and connects the neighboring nodes |
| document.normalizeDocument() | Delete the empty text node and connects the neighboring nodes |
| document.open() | Open a stream to collect output from any document.write() or document.writeln() method. |
| document.querySelector() | Return the first element in the document that matches the specified CSS selector |
| document.querySelectorAll() | document.querySelectorAll() is a new method introduced in HTML5 that returns a list of all element nodes of a matching CSS selector in a document |
| document.readyState | Return the document status (loading...) |
| document.referrer | Return the URL of the document that loaded the current document. |
| document.removeEventListener() | Remove event handles from documents (added by the addEventListener() method) |
| document.renameNode() | Rename an element or attribute node. |
| document.scripts | Return a collection of all scripts in a page. |
| document.strictErrorChecking | Set or return whether error checking is enforced. |
| document.title | Return the title of the current document. |
| document.URL | URL Return the full URL of the document |
| document.write() | Write HTML expressions or JavaScript code to a document. |
| document.writeln() | Equivalent to the write() method, except that a newline character is written after each expression. |
Important!!!
In the W3C DOM core, the document object inherits all the properties and methods of the node object.
Many properties and methods are meaningless in the documentation.
HTML document objects can avoid using these node objects and attributes:
| Attribute / Method | Reasons to avoid |
|---|---|
| document.attributes | Document does not have this property |
| document.hasAttributes() | Document does not have this property |
| document.nextSibling | Documentation has no next node |
| document.nodeName | This is usually #document |
| document.nodeType | Usually is 9 (DOCUMENT_NODE) |
| document.nodeValue | Document does not have a node value |
| document.ownerDocument | Documentation does not have a main document |
| document.ownerElement | Document does not have their own nodes |
| document.parentNode | Document has no parent node |
| document.previousSibling | Document has no sibling nodes |
| document.textContent | Document does not have text nodes |