There are many ways to read content from elements and nodes. Here’s another one that allows you to read and write an individual node’s value. It uses the
nodeValue property of the Node interface. The
nodeValue of an element will always return
null, whereas text nodes, CDATA sections, comment nodes, and even attribute nodes will return the text value of the node. To demonstrate its use, I’ll use the following HTML:
<body class="home"> <p>Example. <span>Example paragraph one.</span></p> <p>Example paragraph two.</p> <p>Example paragraph three.</p> <p>Example paragraph four.</p> <!-- comment text --> </body>
let b = document.body, p1 = document.querySelector('p'); // reading node values console.log(b.nodeValue); // null for all elements console.log(b.attributes.nodeValue); // "home" console.log(b.childNodes.nodeValue); // " comment text " // changing nodeValue of first node inside first paragraph p1.firstChild.nodeValue = 'inserted text<br>';
Notice the second
console.log is displaying the text of an attribute node. This would be the equivalent of using
getAttribute(), with the difference being that
getAttribute() acts on elements, whereas
nodeValue can be applied to any type of node.
Also notice that I’m using
nodeValue to read the contents of an HTML comment. This is one of many ways you can do this. This would be the equivalent of reading the
textContent property or
data property of the comment node. As you can see from the final line in that code example, I’m able to define the nodeValue of one of the text nodes, so this isn’t read-only.
A few other things to note regarding defining the
nodeValue property: Setting nodeValue will return the value that was set, and you cannot set the nodeValue when the nodeValue is null (unless of course you change it to null, which is the same as an empty string that’s changeable later).
MDN’s article on
nodeValue has a chart that lists the different node types and what their
nodeValue will return.