DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Youdiowei Eteimorde
Youdiowei Eteimorde

Posted on

The DOM Interfaces

DOM interface inheritance chain

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

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

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

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

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

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

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

References

  1. The DOM
  2. EventTarget
  3. Window
  4. Node
  5. Element
  6. HTMLElement

Top comments (2)

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 🫰

Collapse
 
eteimz profile image
Youdiowei Eteimorde

Thank you so much 😊

The Complete Guide to Full Stack Web3 Development

>> Check out this classic DEV post <<