An Introduction to HTML DOM (Document Object Model)

The Document Object Model (DOM) represents the structure of the document that connects web pages with scripts or programming languages. Example: HTML representing a web page. HTML, SVG & XML documents are represented as objects in javascript even though it's not a part of core javascript.

DOM represents a logical tree and each branch of the tree ends with a node which in turn contains an object within each node. DOM methods allow programmatical access to the tree that can be used to change the document structure, style, or content. Each node under each branch of a tree can also contain an event handler that would be executed when corresponding events are triggered.

DOM Interfaces

These are the available DOM interfaces that can be accessed programmatical to change the structure, style, or content of a document.

• Attr

An Attr interface represents one of a DOM element’s attributes as an object. In most DOM methods, you will directly retrieve the attribute as a string by calling Element.getAttribute() , and calling the method Element.getAttributeNode() will return the Attr types.

<div class="sampleAttributeValue"> I am a sample content </div>

document.querySelector('div').getAttribute('class') will return you the value of the attribute class sampleAttributeValueas a string. And document.querySelector('div').getAttributeNode('class') will return you class="sampleAttributeValue".

• CDATASection

CDATASection interface represents a CDATA section that can be used within XML to include extended portions of unescaped text. The symbols < and & don’t need escaping as they normally do when inside a CDATA section. In XML, a CDATA section looks like this

<![CDATA[ ... ]]>

Symbols that are to be automatically escaped while parsing an XML can be represented within CDATASection will look similar to the following example.

<foo>Here is a CDATA section: <![CDATA[ < > & ]]> with all kinds of unescaped text.</foo>

• CharacterData

CharacterData abstract interface represents a Node object that contains characters. This is an abstract interface, meaning there aren't any objects of type CharacterData: it is implemented by other interfaces like Text, Comment, or ProcessingInstruction, which aren't abstract.

• ChildNode

The ChildNode mixin contains methods and properties that are common to all types of Nodeobjects that can have a parent. It's implemented by Element, DocumentType, and CharacterData objects. This interface contains methods like ChildNode.before() inserts a new Node or DOMString into the children list of the parent node just before the current ChildNode, ChildNode.after() inserts after the current ChildNode, ChildNode.remove()removes the ChildNode from its parent’s children list, ChildNode.replaceWith() will replace the ChildNode with a new Node or DOMString. This Interface is still under experimental API and should not be used for production.

• Comment

The Comment interface represents textual notations within the markup, although it is generally not visually shown, such comments are available to be read in the source view. Comments are represented in HTML and XML as content between '<!--' and '-->'. In XML, the character sequence '--' cannot be used within a comment.

• CustomEvent

The CustomEvent interface represents events initialized by an application for any purpose. CustomEvent() creates a new CustomEvent.

• Document

Document interface represents any web page loaded in the browser and serves as an entry point into the web page’s content, which is the DOM tree.
It describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents served with the "text/html" content-type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface. Document() creates a new Document object.

• DocumentFragment

The DocumentFragment interface represents a minimal document object that has no parent. It is used as a lightweight version Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is due to the fact that the document fragment isn't part of the active document tree structure. Changes made to the fragment don't affect the document or the performance when changes are made.

• DocumentType

The DocumentType interface represents a Node containing a doctype. It inherits properties from its parent Node and implements the ChildNode Interface.

• DOMError (deprecated)

The DOMError interface describes an error object that contains an error name.

• DOMException

The DOMException interface represents an abnormal event (called an exception) that occurs as a result of calling a method or accessing a property of a web API. This is basically how error conditions are described in web APIs. Each exception has a name, which is a short “PascalCase”-style string identifying the error or abnormal condition.

• DOMImplementation

DOMImplementation interface represents an object providing methods that are not dependent on any particular document.

• DOMString

A DOMString is a sequence of 16-bit unsigned integers, typically interpreted as UTF-16 code units. When a DOMString is provided to JavaScript, it maps directly to the corresponding String. When a Web API accepts DOMString, the value provided will be stringified, using the toString()abstract operation.

• DOMTimeStamp

It represents an absolute or relative number of milliseconds, depending on the specification in which it appears.

• DOMStringList

A type returned by some APIs that contains a list of DOMString (strings). It has a length property with two of its own methods DOMStringList.item() that returns a DOMString and DOMStringList.contains() that returns a boolean indicating if the provided string is available in the string list.

• DOMTokenList

DOMTokenList interface represents a set of space-separated tokens that are case sensitive starting with the index 0. This set is usually returned from Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLAreaElement.relList, HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor.

• Element

An Element is the most general base class from which all element objects (i.e. objects that represent elements) in a Documentinherit. It only has methods and properties common to all kinds of elements. More specific classes inherit from Element. For example, the HTMLElement interface is the base interface for HTML elements, while the SVGElement interface is the basis for all SVG elements

• Event

An Event interface represents an event that takes place in the DOM. It can be triggered by a user action or generated by APIs to represent the progress of an asynchronous task. One can add or remove an event to a DOM element by calling addEventListener() or removeEventListener() methods.

• EventTarget

EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them. Element, Document, and Window are the most common event targets, but other objects can be event targets, too.

• HTMLCollection

An HTMLCollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list. It is automatically updated when the underlying document is changed.

• MutationObserver

MutationObserver interface provides the ability to watch for changes being made to the DOM tree.

• MutationRecord

It represents an individual DOM mutation. It is the object that is passed to MutationObserver's callback.

• NamedNodeMap

This interface represents a collection of Attr objects. Objects inside a NamedNodeMap are not in any particular order that can be accessed by an index as in an array.

• Node

This is an abstract base class upon which many other DOM API objects are based, thus letting those object types be used similarly. As an abstract class, there is no such thing as a plain Node object. All objects that implement Node functionality are based on one of their subclasses.

• NodeFilter

It represents an object used to filter the nodes in a NodeIterator or TreeWalker. A NodeFilter knows nothing about the document or traversing nodes; it only knows how to evaluate a single node against the provided filter.

• NodeIterator

It represents an iterator over the members of a list of the nodes in a subtree of the DOM. The nodes will be returned in document order.

• NodeList

These objects are collections of Nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll()

• ParentNode

The methods and properties of ParentNode are common to all types of Node objects that can have children. It's implemented by Element, Document, and DocumentFragment objects.

• Text

It represents the textual content of an Element or Attr.

• TimeRanges

This interface is used for representing the time ranges of the media resource that has been buffered, the time ranges that have been played, and the time ranges that are seekable. It has two major methods start() and end().

• TreeWalker

This object represents the nodes of a document subtree and a position within them. TreeWalker can be created using the Document.createTreeWalker() method.

• URL

This interface is used to parse, construct, normalize, and encode URLs. It works by providing properties that allow you to easily read and modify the components of a URL.

• Window

It represents a window containing a DOM document. The document property points to the DOM document loaded in that window. A window for a given document can be obtained using the document.defaultViewproperty. This property is exposed to Javascript code through a global variable window.

• Worker

Worker represents a background task that can be created via script, which can send messages back to its creator. Creating a worker is done by calling the Worker("path/to/worker/script") constructor.

Workers may themselves can spawn new workers, as long as those workers are hosted at the same origin as the parent page.

Note: fetch() and XMLHttpRequest() are available within a Worker to have a network communication.

• XMLDocument

This interface represents an XML document. It inherits from the generic Document and does not add any specific methods or properties to it. The method XMLDocument.load()can be used to load an XML document.

We have just gone through the most used DOM interfaces apart from the above list there are some additional interfaces available. Some of those are experimental APIs that should not be used in production and so we haven’t gone through them. DOM Interfaces are majorly classified into HTML DOM interfaces and SVG interfaces that have their own list. To have a kickstart in HTML basics have a visit here.