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.
These are the available DOM interfaces that can be accessed programmatical to change the structure, style, or content of a document.
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
CDATASection interface represents a CDATA section that can be used within XML to include extended portions of unescaped text. The symbols
& 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 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
ProcessingInstruction, which aren't abstract.
The ChildNode mixin contains methods and properties that are common to all types of
Nodeobjects that can have a parent. It's implemented by
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.
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.
The CustomEvent interface represents events initialized by an application for any purpose.
CustomEvent() creates a new
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
Document() creates a new
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.
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.
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 interface represents an object providing methods that are not dependent on any particular document.
A DOMString is a sequence of 16-bit unsigned integers, typically interpreted as UTF-16 code units. When a
DOMString, the value provided will be stringified, using the
It represents an absolute or relative number of milliseconds, depending on the specification in which it appears.
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 interface represents a set of space-separated tokens that are case sensitive starting with the index 0. This set is usually returned from
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
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 is a DOM interface implemented by objects that can receive events and may have listeners for them.
Window are the most common event targets, but other objects can be event targets, too.
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 interface provides the ability to watch for changes being made to the DOM tree.
It represents an individual DOM mutation. It is the object that is passed to
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.
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.
It represents an object used to filter the nodes in a
NodeFilter knows nothing about the document or traversing nodes; it only knows how to evaluate a single node against the provided filter.
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.
These objects are collections of Nodes, usually returned by properties such as
Node.childNodes and methods such as
The methods and properties of ParentNode are common to all types of
Node objects that can have children. It's implemented by
It represents the textual content of an Element or Attr.
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().
This object represents the nodes of a document subtree and a position within them.
TreeWalker can be created using the
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.
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
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
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.
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.