Back to Home
Home / dom-manipulation / Node properties: type, tag and contents

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 has link-related properties, and the one corresponding to 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

Hello

. - 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: - HTMLInputElement – the class for elements, - HTMLBodyElement – the class for elements, - HTMLAnchorElement – the class for elements, - …and so on. There are many other tags with their own classes that may have specific properties and methods, while some elements, such as ,
,
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 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, - Node – provides common DOM node properties, - EventTarget – gives the support for events (to be covered), - …and finally it inherits from Object, so “plain object” methods like hasOwnProperty are also available. To see the DOM node class name, we can recall that an object usually has the constructor property. It references the class constructor, and constructor.name is its name: …Or we can just toString it: We also can use instanceof to check the inheritance: As we can see, DOM nodes are regular JavaScript objects. They use prototype-based classes for inheritance. That’s also easy to see by outputting an element with console.dir(elem) in a browser. There in the console you can see HTMLElement.prototype, Element.prototype and so on. // Define HTMLInputElement // The colon “:” means that HTMLInputElement inherits from HTMLElement interface HTMLInputElement: HTMLElement { // here go properties and methods of elements // “DOMString” means that the value of a property is a string attribute DOMString accept; attribute DOMString alt; attribute DOMString autocomplete; attribute DOMString value; // boolean value property (true/false) attribute boolean autofocus; … // now the method: “void” means that the method returns no value void select(); …

The “nodeType” property

The nodeType property provides one more, “old-fashioned” way to get the “type” of a DOM node. It has a numeric value: - elem.nodeType == 1 for element nodes, - elem.nodeType == 3 for text nodes, - elem.nodeType == 9 for the document object, - there are few other values in the specification. For instance: In modern scripts, we can use instanceof and other class-based tests to see the node type, but sometimes nodeType may be simpler. We can only read nodeType, not change it.

Tag: nodeName and tagName

Given a DOM node, we can read its tag name from nodeName or tagName properties: For instance: Is there any difference between tagName and nodeName? Sure, the difference is reflected in their names, but is indeed a bit subtle. - The tagName property exists only for Element nodes. - The nodeName is defined for any Node: - for elements it means the same as tagName. - for other node types (text, comment, etc.) it has a string with the node type. In other words, tagName is only supported by element nodes (as it originates from Element class), while nodeName can say something about other node types. For instance, let’s compare tagName and nodeName for the document and a comment node: If we only deal with elements, then we can use both tagName and nodeName - there’s no difference.

innerHTML: the contents

The innerHTML property allows to get the HTML inside the element as a string. We can also modify it. So it’s one of the most powerful ways to change the page. The example shows the contents of document.body and then replaces it completely: We can try to insert invalid HTML, the browser will fix our errors:

Beware: “innerHTML+=” does a full overwrite

We can append HTML to an element by using elem.innerHTML+=“more html”. Like this: But we should be very careful about doing it, because what’s going on is not an addition, but a full overwrite. Technically, these two lines do the same: In other words, innerHTML+= does this: 1. The old contents is removed. 2. The new innerHTML is written instead (a concatenation of the old and the new one). As the content is “zeroed-out” and rewritten from the scratch, all images and other resources will be reloaded. In the chatDiv example above the line chatDiv.innerHTML+=“How goes?” re-creates the HTML content and reloads smile.gif (hope it’s cached). If chatDiv has a lot of other text and images, then the reload becomes clearly visible. There are other side-effects as well. For instance, if the existing text was selected with the mouse, then most browsers will remove the selection upon rewriting innerHTML. And if there was an with a text entered by the visitor, then the text will be removed. And so on. Luckily, there are other ways to add HTML besides innerHTML, and we’ll study them soon.

outerHTML: full HTML of the element

The outerHTML property contains the full HTML of the element. That’s like innerHTML plus the element itself. Here’s an example: Beware: unlike innerHTML, writing to outerHTML does not change the element. Instead, it replaces it in the DOM. Yeah, sounds strange, and strange it is, that’s why we make a separate note about it here. Take a look. Consider the example: Looks really odd, right? In the line () we replaced div with

A new element

. In the outer document (the DOM) we can see the new content instead of the
. But, as we can see in line (*), the value of the old div variable hasn’t changed! The outerHTML assignment does not modify the DOM element (the object referenced by, in this case, the variable ‘div’), but removes it from the DOM and inserts the new HTML in its place. So what happened in div.outerHTML=… is: - div was removed from the document. - Another piece of HTML

A new element

was inserted in its place. - div still has its old value. The new HTML wasn’t saved to any variable. It’s so easy to make an error here: modify div.outerHTML and then continue to work with div as if it had the new content in it. But it doesn’t. Such thing is correct for innerHTML, but not for outerHTML. We can write to elem.outerHTML, but should keep in mind that it doesn’t change the element we’re writing to (‘elem’). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM.

nodeValue/data: text node content

The innerHTML property is only valid for element nodes. Other node types, such as text nodes, have their counterpart: nodeValue and data properties. These two are almost the same for practical use, there are only minor specification differences. So we’ll use data, because it’s shorter. An example of reading the content of a text node and a comment: For text nodes we can imagine a reason to read or modify them, but why comments? Sometimes developers embed information or template instructions into HTML in them, like this: …Then JavaScript can read it from data property and process embedded instructions.

textContent: pure text

The textContent provides access to the text inside the element: only text, minus all . For instance: As we can see, only text is returned, as if all were cut out, but the text in them remained. In practice, reading such text is rarely needed. Writing to textContent is much more useful, because it allows to write text the “safe way”. Let’s say we have an arbitrary string, for instance entered by a user, and want to show it. - With innerHTML we’ll have it inserted “as HTML”, with all HTML tags. - With textContent we’ll have it inserted “as text”, all symbols are treated literally. Compare the two: 1. The first

gets the name “as HTML”: all tags become tags, so we see the bold name. 2. The second
gets the name “as text”, so we literally see Winnie-the-Pooh!. In most cases, we expect the text from a user, and want to treat it as text. We don’t want unexpected HTML in our site. An assignment to textContent does exactly that.

The “hidden” property

The “hidden” attribute and the DOM property specifies whether the element is visible or not. We can use it in HTML or assign it using JavaScript, like this: Technically, hidden works the same as style=“display:none”. But it’s shorter to write. Here’s a blinking element:

More properties

DOM elements also have additional properties, in particular those that depend on the class: - value – the value for ,