HTML DOM DocumentObject

HTML DOM Nodes

In HTML DOM (Document Object Model), every element is anode:

  • 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 an HTML document, it becomes aDocument Object。

The Document object is the root node of an HTML document.

The Document object allows us to access all elements in an HTML page from a script.

Tip:The Document object is part of the Window object and can be accessed via the window.document property.

Browser Support

Internet ExplorerFirefoxOperaGoogle ChromeSafari

All major browsers support the Document object.

Document Object Properties and Methods

The following properties and methods can be used in an HTML document:

Property / Method Description
document.activeElement Returns the element currently focused on.
document.addEventListener() Adds a handle to the document.
document.adoptNode(node) Returns an adopted node from another document to the current document.
document.anchors Returns a reference to all Anchor objects in the document.
document.applets

Returns a reference to all Applet objects in the document.

Note:HTML5 no longer supports the <applet> element.
document.baseURI Returns the absolute base URI of the document.
document.body Returns the body element of the document.
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() Creates an attribute node.
document.createComment() The createComment() method creates a comment node.
document.createDocumentFragment() Creates an empty DocumentFragment object and returns this object.
document.createElement() Creates an element node.
document.createTextNode() Creates 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 mode used by the browser to render the document.
document.documentURI Sets or returns the location of the document.
document.domain Returns the domain name of the current document.
document.domConfig Deprecated。Returns the configuration used when normalizeDocument() is called.
document.embeds Returns a collection of all embedded content (embed) in the document.
document.forms Returns a reference 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 a reference to all Image objects in the document.
document.implementation Returns the DOMImplementation object that processes the document.
document.importNode() Copies a node from another document to this document for application.
document.inputEncoding Returns the encoding used for the document (at parse time).
document.lastModified Returns the date and time the document was last modified.
document.links Returns a reference to all Area and Link objects in the document.
document.normalize() Removes empty text nodes and connects adjacent nodes.
document.normalizeDocument() Removes empty text nodes and connects adjacent nodes.
document.open() Opens a stream to collect output from any document.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 in the document that match the CSS selector.
document.readyState Returns the document state (loading...)
document.referrer Returns the URL of the document that loaded the current document.
document.removeEventListener() Removes an event handle from the document (added by the addEventListener() method).
document.renameNode() Renames an element or attribute node.
document.scripts Returns a collection of all scripts in the page.
document.strictErrorChecking Sets or returns whether to enforce error checking.
document.title Returns the title of the current document.
document.URL Returns the full URL of the document.
document.write() Writes HTML expressions or JavaScript code to the document.
document.writeln() Equivalent to the write() method, except that it writes a newline after each expression.

Warning !!!

In the W3C DOM core, the document object

inherits all properties and methods of the node object.

Many properties and methods are not meaningful in a document.

HTML document objects can avoid using these node objects and properties: Property / Method
document.attributes Reason to avoid
document.hasAttributes() The document does not have this property.
document.nextSibling The document does not have this property.
document.nodeName The document has no next node.
document.nodeType This is usually #document
document.nodeValue This is usually 9 (DOCUMENT_NODE)
document.ownerDocument The document has no node value.
document.ownerElement The document has no owner document.
document.parentNode The document has no own node.
document.previousSibling The document has no parent node.
document.textContent The document has no sibling nodes.
The document has no text node.