The DOM Interfaces
Tags: javascript, webdev, html, api
Published: 2022-09-27 00:10:04


![DOM interface inheritance chain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gt97kxmmn2c09soowvh.png)

The **DOM** stands for **Document Object Model**. It is the object representation of an HTML document.

DOM interfaces provide a means for JavaScript to access the DOM. The DOM interfaces are not built into JavaScript, instead, they are built into the web browser. 

There are several DOM interfaces, most interface corresponds to a particular HTML tag. In this article, I will be going through the inheritance chain of the major DOM Interfaces.

## EventTarget

This interface defines methods for handling and firing events, other DOM interfaces inherit from it. It contains three methods.
- .addEventListener()
- .removeEventListener()
- .dispatchEvent()


## Window

![Window Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd1f2zvv6uk3okbt9iu5.png)

This interface defines all methods, properties, and events for working with the Browser's window. It directly inherits from the EventTarget interface. The Window interface can be accessed via the **window** global object. Here's a list of the most popular properties and methods in the Window interface.

**Properties**
- .innerWidth
- .innerHeight
- .location

**methods**
- alert()
- requestAnimationFrame()

## Node

![Node Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcdfx0nabd6k14vkdn2g.png)

The Node interface is an abstract base class. It cannot be instantiated directly. Other DOM objects inherit from it, this enables these objects to be used interchangeably. It also inherits directly from the EventTarget interface. Here's a list of the most popular properties and methods in the Node interface.

**properties**
- .firstChild
- .nodeName 
- .textContent

**methods**
- .appendChild()
- .removeChild()
- .contains()

## Document 

![Document Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orxk9trlm1viodeo4yc6.png)

This interface provides access to the entire HTML document. It inherits directly from the Node interface. All Elements are contained within the Document interface, and they all form the DOM Tree. Here's a list of the most popular properties and methods in the Document interface.

**properties**
- .body
- .forms
- .title

**methods**
- .createElement()
- .getElementById()
- .querySelector()

## Element

![Element Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i20cnpozkbxkizx8bse5.png)

This interface serves as the base interface for all other elements. It inherits from the Node interface. Here's a list of the most popular properties and methods in the Element interface.

**properties**
- .children
- .innerHTML
- .tagName

**methods**
- .append()
- .getAttributeNames()
- .remove()

## HTMLElement

![HTMLElement interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4no4rtzys63flzeao8g.png)

This is the base interface for all HTML elements. It inherits from the Element interface. Several other interfaces inherit from it. All HTML elements are contained within a Document. Here's a list of popular interfaces that inherit from it.

- HTMLAnchorElement
- HTMLCanvasElement
- HTMLButtonElement
- HTMLImageElement


## SVGElement


![SVGElement Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n7z6v0otfxfsn7ne3tf.png)

This is the base interface for all SVG elements. It inherits from the Element interface.


## References

1. [The DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
2. [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)
3. [Window](https://developer.mozilla.org/en-US/docs/Web/API/Window)
4. [Node](https://developer.mozilla.org/en-US/docs/Web/API/Node)
5. [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)
6. [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)