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

6.png

All major browsers support the Document object.


Document object properties and methods

The above properties and methods can be used in HTML documents:

Properties/MethodsDescription
document.activeElementReturns 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.anchorsReturns references to all Anchor objects in the document.
document.appletsReturns references to all Applet objects in the document.
document.baseURIReturns the absolute base URI of the document
document.bodyReturns 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.doctypeReturns the document type declaration (DTD) associated with the document.
document.documentElementReturns the root node of the document
document.documentModeReturns the root node used for Mode for rendering documents through the browser
document.documentURISet or return the location of the document
document.domainReturn the domain name of the current document.
document.domConfigReturns the configuration used when normalizeDocument() is called
document.embeds Returns a collection of all embedded content (embeds) in the document
document.formsReturns 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.imagesReturns references to all Image objects in the document.
document.implementationReturns the DOMImplementation object that handles the document.
document.importNode()Copy a node from another document to this document for application.
document.inputEncodingReturns the encoding used for the document (when parsed).
document.lastModifiedReturns the date and time the document was last modified.
document.linksReturns 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.referrerReturn 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.scriptsReturns the collection of all scripts in the page.
document.strictErrorCheckingSet or return whether to force error checking.
document.titleReturns the title of the current document.
document.URLReturn 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/MethodsAvoided Reason
document.attributesThe document does not have this attribute
document.hasAttributes()Document There is no such attribute
document.nextSiblingThe document has no next node
document.nodeName This is usually #document
document.nodeTypeThis is usually 9(DOCUMENT_NODE)
document.nodeValueThe document does not have a node value
document.ownerDocumentThe document does not have a main document
document.ownerElementThe document has no node of its own
document.parentNodeThe document has no parent node
document.previousSibling The document has no sibling nodes
document.textContentThe document has no text node