HTML DOM object
HTML DOM Node
In HTML DOM (Document Object Model), each element is Node:
-
Document is a document.
All HTML elements are element nodes.
All HTML attributes are attribute nodes.
Text inserted into HTML elements is a text node. are text nodes.
Comments are comment nodes.
Document Object
When the browser loads an HTML document, it will become a document object.
The document object is the root node of the HTML document and all other nodes (element nodes, text nodes, attribute nodes, comment nodes).
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 through the window.document property.
Browser Support
All major browsers support the Document object.
Document object properties and methods
The above properties and methods can be used in HTML documents:
Properties/Methods | Description |
---|---|
document.activeElement | Returns the currently focused element |
document.addEventListener() | Add a handle to the document |
document.adoptNode(node) | From Another document returns adapted nodes to the current document. |
document.anchors | Returns references to all Anchor objects in the document. |
document.applets | Returns references to all Applet objects in the document. |
document.baseURI | Returns the absolute base URI of the document |
document.body | Returns the document The body element |
document.close() | Closes the output stream opened with the document.open() method and displays the selected data. |
document.cookie | Sets or returns all cookies related to the current document. |
document.createAttribute() | Create an attribute node |
document.createComment() | The createComment() method creates a comment node. |
document.createDocumentFragment() | Create an empty DocumentFragment object and return this object. |
document.createElement() | Create element node. |
document.createTextNode() | Create 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 root node used for Mode for rendering documents through the browser |
document.documentURI | Set or return the location of the document |
document.domain | Return the domain name of the current document. |
document.domConfig | Returns the configuration used when normalizeDocument() is called |
document.embeds | Returns a collection of all embedded content (embeds) in the document |
document.forms | Returns references to all Form objects in the document. |
document. getElementsByClassName() | Returns a collection of all elements with the specified class name in the document 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 references to all Image objects in the document. |
document.implementation | Returns the DOMImplementation object that handles the document. |
document.importNode() | Copy a node from another document to this document for application. |
document.inputEncoding | Returns the encoding used for the document (when parsed). |
document.lastModified | Returns the date and time the document was last modified. |
document.links | Returns references to all Area and Link objects in the document. |
document.normalize() | Delete empty text nodes and connect adjacent nodes |
document.normalizeDocument() | Remove empty text nodes and connect adjacent nodes |
document.open() | Open a stream to collect data from any document. The output of the write() or document.writeln() method. |
document.querySelector() | Returns 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 that match the CSS selector in the document |
document.readyState | Return document status (loading...) |
document.referrer | Return the URL of the document that loads the current document. |
document.removeEventListener() | Remove the event handler in the document (added by the addEventListener() method) |
document.renameNode() | Rename elements or attribute nodes. |
document.scripts | Returns the collection of all scripts in the page. |
document.strictErrorChecking | Set or return whether to force error checking. |
document.title | Returns the title of the current document. |
document.URL | Return the complete URL of the document |
document.write() | To Documents are written as HTML expressions or JavaScript code. |
document.writeln() | Identical to the write() method, except that a newline character is written after each expression. |
WARNING !!!
In W3C DOM Core, Document Object Inherits all properties and methods of node objects.
Many properties and methods are meaningless in the documentation.
HTML document object can avoid using these node objects and attributes:
Properties/Methods | Avoided Reason |
---|---|
document.attributes | The document does not have this attribute |
document.hasAttributes() | Document There is no such attribute |
document.nextSibling | The document has no 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 main document |
document.ownerElement | The document has no node of its own |
document.parentNode | The document has no parent node |
document.previousSibling | The document has no sibling nodes |
document.textContent | The document has no text node |