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

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support the Document object.


Document object properties and methods

The following attributes and methods can be used in HTML documents:

Property / MethodDescription
document.activeElementReturn 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.anchorsReturn 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.baseURIReturn the absolute base URI of a document
document.bodyReturn the body element of the document
document.close()Close the output stream opened with the document.open() method and displays the selected data.
document.cookieSet 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.doctypeReturn a document type declaration (DTD) related to a document.
document.documentElementReturn the root node of a document
document.documentModeReturn the mode used to render a document through the browser
document.documentURISet or return the position of the document
document.domainReturn the domain name of the current document.
document.domConfigDeprecated. Return the configuration used when normalizeDocument() was called.
document.embedsReturn a collection of all embedded content (embeds) in a document
document.formsReturn 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.imagesReturn references to all Image objects in the document.
document.implementationReturn the DOMImplementation object that processes the document.
document.importNode()Copy a node from another document to that document for application.
document.inputEncodingReturn the encoding used for the document (at parsing time).
document.lastModifiedReturn the date and time that the document was last modified.
document.linksReturn 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.readyStateReturn the document status (loading...)
document.referrerReturn 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.scriptsReturn a collection of all scripts in a page.
document.strictErrorCheckingSet or return whether error checking is enforced.
document.titleReturn the title of the current document.
document.URLURL 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 / MethodReasons to avoid
document.attributesDocument does not have this property
document.hasAttributes()Document does not have this property
document.nextSiblingDocumentation has no next node
document.nodeNameThis is usually #document
document.nodeTypeUsually is 9 (DOCUMENT_NODE)
document.nodeValueDocument does not have a node value
document.ownerDocumentDocumentation does not have a main document
document.ownerElementDocument does not have their own nodes
document.parentNodeDocument has no parent node
document.previousSiblingDocument has no sibling nodes
document.textContentDocument does not have text nodes