Rectangle 27 0

javascript Roles and responsibilties inherited in this browser object's hierarchy?


Node and Element

EventTarget 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, ... Every HTML tag, <Foo>, has a corresponding Javascript class <HTMLFooElement>. These are all subclasses of HTMLElement. Similarly every SVG element, <Bar> has a corresponding class <SVGBarElement>. So for <span>, <div>, etc. ... we have HTMLSpanElement and HTMLDivElement. Likewise for SVG's <g> and <circle> elements, we have SVGGElement and SVGCircleElement.Roles & Responsibilities: Again these classes are used to keep the inheritance tree organised. It is convenient to give a OOP type for each particular element and have element-specific methods and properties. SVG circle has properties for x position, y position and radius, for example.

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().

ObjectObject is not necessarily browser related. Javascript in a Node.js environment, for example also has Object. It is similar to Object in Java. It represents the most generic, basic form of object and forms the basis of Object Oriented Programming in Javascript. All objects in Javascript inherit from Object.Roles & Responsibilities: It is there to act as the base class of all classes and provide simple methods like toString() and is() (similar to Java's isEqual).

Note
Rectangle 27 0

javascript Roles and responsibilties inherited in this browser object's hierarchy?


@overexchange That's what I'm trying to say for node and element, they deal with all the parent-child stuff. If you're looking for specifics down to the API level, I don't think we'll be able to address that in this thread without just linking you to some documentation.

Can you share the reference to any documentation that talks about the roles and responsibilities?

Elements and nodes have parent/child relationships which can be traversed, iterated over, etc.

Elements are a subset of nodes which have html tags. The element level also holds the API for a number of high-level generic attributes and event handling that all of the HTML elements share.

For example: property names removeChild appendChild say that Node handles a responsibility of maintening an html element. So, without mentioning each property name, I need outline of responsibilities of each object in that hierarchy, without getting into API specifics

HTML elements are essentially different tags which have certain basic looks and feels. So there's lots of default CSS and supported eventing this level. Also certain HTML elements can only be children of other certain ones. Think schema.

I think object is pretty self explanatory, for object-oriented purposes (prototypes, instantiation, etc). The thing that comes to mind when I see that though, is that it would be the spot on the graph which would be responsible for JSON serialization.

Nodes are basically every item in the DOM including text nodes.

The event target is essentially a node at a point in time when an event has fired; which is the object passed to the event handler that is set on that node for that specific event. E.g. the button that I just clicked.

Note