We want to make this open-source project available for people all around the world.

Help to translate the content of this tutorial to your language!

BuyEPUB/PDF
Tutorial map
  1. Tutorial
  2. Browser: Document, Events, Interfaces
  3. Document
August 5, 2022

Node properties: type, tag and contents

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

In this chapter we’ll see more into what they are and learn their most used properties.

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 nextElementSibling, children and searching methods like getElementsByTagName, querySelector.

    A browser supports not only HTML, but also XML and SVG. So the Element class serves as a base for more specific classes: SVGElement, XMLElement (we don’t need them here) and HTMLElement.

  • Finally, HTMLElement is the basic class for all HTML elements. We’ll work with it most of the time.

    It is inherited by concrete HTML elements:

There are many other tags with their own classes that may have specific properties and methods, while some elements, such as <span>, <section>, <article> do not have any specific properties, so they are instances of HTMLElement class.

So, the full set of properties and methods of a given node comes as the result of the chain of inheritance.

For example, let’s consider the DOM object for an <input> element. It belongs to HTMLInputElement class.

It gets properties and methods as a superposition of (listed in inheritance order):

  • HTMLInputElement – this class provides input-specific properties,
  • HTMLElement – it provides common HTML element methods (and getters/setters),
  • Element – provides generic element methods,