Issue #181 (New Design, NodeValue, JS Libs, Productivity, Media)01/05/17
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>
|
Now I'll run the following JavaScript to read/write a few of the nodes:
|
let b = document.body,
p1 = document.querySelector('p');
// reading node values
console.log(b.nodeValue); // null for all elements
console.log(b.attributes[0].nodeValue); // "home"
console.log(b.childNodes[7].nodeValue); // " comment text "
// changing nodeValue of first node inside first paragraph p1.firstChild.nodeValue = 'inserted text<br>';
|
View on JS Bin
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.
Now on to this week's tools!
