Working with nodes in JavaScript

As you know, tags can contain other tags or, in JavaScript terms, DOM elements can contain other DOM elements. In addition, however, they may contain comments and plain text. Comments, texts and DOM elements are united by one name - nodes.

You already know the properties firstElementChild, lastElementChild, nextElementSibling, previousElementSibling. These properties only work with DOM elements, ignoring other nodes. As a rule, this is exactly what we need.

However, there are also properties firstChild, lastChild, nextSibling, previousSibling. These properties work in a similar way, however, considering all nodes. Let's see the difference between these properties with an example. Suppose we have a div containing three nodes:

<div id="elem"><!--сomm-->text<span>tag</span></div>

Get a reference to this div into a variable:

let elem = document.querySelector('#elem');

Now let's see what is contained in the properties firstChild and firstElementChild:

console.log(elem.firstChild); // comment console.log(elem.firstElementChild); // span tag

Write code that shows the difference between lastChild and lastElementChild.

Write code that shows the difference between nextSibling and nextElementSibling.

Write code that shows the difference between previousSibling and previousElementSibling.

Loop iteration

As you should already know, the property children contains all DOM elements that are direct children of this element. There is a similar property childNodes which contains all child nodes of an element.

Let's, for example, use this property to display various nodes from our element:

console.log(elem.childNodes[0]); console.log(elem.childNodes[1]); console.log(elem.childNodes[2]);

And now let's iterate over the nodes of the element in a loop:

for (let node of elem.childNodes) { console.log(node); }

Given a div:

<div id="elem">txt<b>tag</b><!--com-->txt<b>tag</b><!--com--></div>

Loop through all the nodes of this div and print them to the console.

Node name

All nodes have the property nodeName. For a comment, it contains the value 'comment', for a text node, the value 'text', and for an element node, the tag name in uppercase. It turns out that nodeName for elements is similar to the property tagName, but works for other types of nodes as well.

Given a div:

<div id="elem">txt<b>tag</b><!--com-->txt<b>tag</b><!--com--></div>

Loop through all the nodes of this div and print their names to the console.

Node type

All nodes have the property nodeType. Its value is numeric: 1 for elements, 3 for text nodes, 8 for comments. The remaining values are currently either little used or outdated.

Given a div:

<div id="elem">txt<b>tag</b><!--com-->txt<b>tag</b><!--com--></div>

Loop through all the nodes of this div and output only the element nodes and text nodes to the console.

Node text

Let's now figure out how to read or change the text of the nodes. For all nodes, the textContent property works. For text nodes and comments, there are properties nodeValue and data (they are almost the same, the second one is shorter, it's better to use it). For elements there is a property innerHTML that reads the text along with the tags.

Given a div:

<div id="elem">txt<b>tag</b><!--com-->txt<b>tag</b><!--com--></div>

Loop through all the nodes of this div and output the texts of all nodes to the console.

Given a div:

<div id="elem">txt<b>tag</b><!--com-->txt<b>tag</b><!--com--></div>

Loop through all nodes of this div and print to the console the texts of all comments and text nodes.

Given a div:

<div id="elem">txt<b>tag</b><!--com-->txt<b>tag</b><!--com--></div>

Loop through all the nodes of this div and output to the console the texts of the text nodes and elements.

Given a div:

<div id="elem">txt<b>tag</b><!--com-->txt<b>tag</b><!--com--></div>

Loop through all the nodes of this div and write down the type of each node to the its end.

enru