0

In the below hierarchy of browser objects,

enter image description here

Each object in the above hierarchy would have been created to target certain scope of responsibilities to manage html elements.

In the above hierarchy, Can you please outline the roles & responsibilities of each browser object including Object that are inherited by its child?

overexchange
  • 15,768
  • 30
  • 152
  • 347
  • @Sam I do not know the purpose of Nodejs. am new to JS. – overexchange Dec 22 '15 at 02:11
  • 1
    Have you tried the MDN documentation: - [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) - [EventTarget](https://developer.mozilla.org/en/docs/Web/API/EventTarget) - [Node](https://developer.mozilla.org/en/docs/Web/API/Node) - [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) - [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement). Might be a bit advanced for somebody new to JS but could be a good place to get some ideas from. – James Lawson Dec 22 '15 at 02:12

2 Answers2

1

I'll take a shot at some basics.

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

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.

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

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.

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.

spozun
  • 872
  • 1
  • 6
  • 14
  • 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 – overexchange Dec 22 '15 at 02:36
  • @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. – spozun Dec 22 '15 at 02:38
  • Can you share the reference to any documentation that talks about the roles and responsibilities? – overexchange Jan 16 '16 at 18:08
0

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

Node and Element
See: What's the difference between an element and a node in XML? and: Is an Element an instance of a Node in HTML?

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

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.

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.

Community
  • 1
  • 1
James Lawson
  • 8,150
  • 48
  • 47