Node and Element
This is more of an interface than a class. It is similar to the observer pattern. Any class that implements this EventTarget is able to register several subscribers via addEventListener and then later, send an event to the subscribers.Roles & Responsibilities: It is useful for listening to events such as clicks, keyboard presses, etc.
For example, if you click on a <div>, the browser will call dispatchEvent on the HTMLDivELement and anyone will have subscribed will have their callback function invoked.
HTMLElement, SVGElement, ...
The two most common types of XML the browser deals with is HTML and SVG. But there are more. For example MathML is XML for writing maths equations in the browser. HTMLElement is a subclass of Element for HTML tags (<div>, <h1>, <span>, ...). SVGElement is a subclass of Element used for SVG tags (<g>, <clipPath>, <circle>, ...).Roles & Responsibilities: HTMLElement and SVGElement are mainly needed to keep the inheritance tree organised. Programmers can use instanceof on a Element to see whether they are dealing with HTML or SVG or some other kind of XML the browser supports. HTMLElement has some methods for accessibility like
SVGElement has some methods related to the SVG viewport.
HTMLSpanElement, HTMLDivElement, ...
Node and Element represent nodes are related to DOM trees and are inspired by XML's definition of Node and Element. A DOM tree is a tree representation of XML. A node represents anything in the tree (a comment, a ctag, a tag, an attribute). An element is specifically, nodes that are tags (<div>, <h1>, <span>, <g>, <clipPath>, <circle>, ...). By this definition, every element is a node (Element inherits from Node).Roles & Responsibilities: Node is there to provide a useful abstraction for manipulating a DOM tree. Methods like traversing the tree, adding nodes, removing nodes, finding childing. Element has the same role but is there when we specifically deals with tags. It has extra methods specific to tags like Element.tagName().