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