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 their most used properties.
DOM node classes
DOM nodes have different properties depending on their class. 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.
Here's the picture, explanations to follow:
The classes are:
- EventTarget -- is the root "abstract" class. 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:
childNodesand so on (they are getters). Objects of
Nodeclass are never created. But there are concrete node classes that inherit from it, namely:
Textfor text nodes,
Elementfor element nodes and more exotic ones like
Commentfor comment nodes.
- Element -- is a base class for DOM elements. It provides element-level navigation like
childrenand searching methods like
querySelector. In the browser there may be not only HTML, but also XML and SVG documents. The
Elementclass serves as a base for more specific classes:
- HTMLElement -- is finally the basic class for all HTML elements. It is inherited by various HTML elements:
So, the full set of properties and methods of a given node comes as the result of the 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:
HTMLInputElement-- this class provides input-specific properties, and inherits from...
HTMLElement-- it provides common HTML element methods (and getters/setters) and inherits from...
Element-- provides generic element methods and inherits from...
Node-- provides common DOM node properties and inherits from...
EventTarget-- gives the support for events (to be covered),
- ...and finally it inherits from
Object, so "pure object" methods like
hasOwnPropertyare also available.
To see the DOM node class name, we can recall that an object usually has the
constructor property. It references to the class constructor, and
constructor.name is its name:
alert( document.body.constructor.name ); // HTMLBodyElement
...Or we can just
alert( document.body ); // [object HTMLBodyElement]
We also can use
instanceof to check the inheritance:
alert( document.body instanceof HTMLBodyElement ); // true alert( document.body instanceof HTMLElement ); // true alert( document.body instanceof Element ); // true alert( document.body instanceof Node ); // true alert( document.body instanceof EventTarget ); // true
That's also easy to see by outputting an element with
console.dir(elem) in a browser. There in the console you can see
Element.prototype and so on.
console.dir(elem) versus `console.log(elem)`"
But for DOM elements they are different:
console.log(elem)shows the element DOM tree.
console.dir(elem)shows the element as a DOM object, good to explore its properties.
Try it on
Other classes are somewhat similar.