Node properties: type, tag and contents

Let’s get a more in-depth look at DOM nodes.

DOM node classes

Different DOM nodes may have different properties. For instance, an element node corresponding to tag <a> has link-related properties, and the one corresponding to <input> has input-related properties and so on. Text nodes are not the same as element nodes. But there are also common properties and methods between all of them, because all classes of DOM nodes form a single hierarchy.

Each DOM node belongs to the corresponding built-in class.

The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it.

Here’s the picture, explanations to follow:

The classes are:

• EventTarget – is the root “abstract” class for everything.

  Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called “events”, we’ll study them later.

• Node – is also an “abstract” class, serving as a base for DOM nodes.

  It provides the core tree functionality: parentNode, nextSibling, childNodes and so on (they are getters). Objects of Node class are never created. But there are other classes that inherit from it (and so inherit the Node functionality).

• Document, for historical reasons often inherited by HTMLDocument (though the latest spec doesn’t dictate it) – is a document as a whole.

  The document global object belongs exactly to this class. It serves as an entry point to the DOM.

• CharacterData – an “abstract” class, inherited by:

  • Text – the class corresponding to a text inside elements, e.g. Hello in <p>Hello</p>.
  • Comment – the class for comments. They are not shown, but each comment becomes a member of DOM.

• Element – is the base class for DOM elements.

  It provides element-level navigation like