Node Value

In our continuing look at the DOM, I would like to turn our attention to node value. We can utilize this property to pull the value contained within a node and even change the value. So how does this work? I am glad you asked…

[code lang=”html”]
<p id="myP">This is my paragraph content.</p>
// Grab the textNode nodeValue within the paragraph
var myP = document.getElementById("myP").firstChild.nodeValue;
alert(myP); // This should alert the text – "This is my paragraph content."
// Set the textNode nodeValue to a new value…this should change it on the screen
document.getElementById("myP").firstChild.nodeValue = "This is new content.";

As I stated in a previous post, we could use innerHTML, but it is not a standard and we want to make certain we follow standards as much as possible. There are other “gotchas” with innerHTML when it comes to reading and writing text, but that is for another post.

In the aforementioned code, you can see that I am grabbing the node value of the text within the paragraph. Notice how I phrased that? Your first thought might be, “Oh…he is grabbing the value of the paragraph.” That is not accurate. In the DOM, every element is a node. So in my code, the paragraph tag is a node and the text within the paragraph is a node. The paragraph is the parent of the text node. The text node is the child of the paragraph node element. So both are node, just different type of nodes. That is why I had to use the firstChild property. I could not simply say, “Give me the value within the paragraph.” I had to tell my code, “Give me the value of the text node.” Since we do not have a way to grab the text node directly via an ID or anything, I had to traverse the DOM utilizing firstChild. So, in essence, I told my code, “Grab the paragraph element and give me the first child inside it, which was my text.” I used the saame method to change the value of the text node.

Note: Make certain you are cautious when traversing the DOM and altering node values. If you do not work through the logic and test, you could end up with odd behavior, such as mixing up text node values that do not make sense. Fortunately, JavaScript gives us ways to do this with methods such as, removeChild, appendChild and createTextNode, which we will explore in future posts.

Happy Coding!

Clay Hess

More To Explore

computer, laptop, work place-2982270.jpg

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

lighthouse, beacon, atlantic-8578318.jpg

Understanding the Beacon API: Simplifying Asynchronous Data Transfers

In today’s data-driven world, web applications often need to send data back to the server. Traditionally, this has been done using AJAX requests or similar methods. However, these techniques can come with a cost, especially when dealing with data that needs to be sent during the unload phase of a document, such as tracking and diagnostic data. This is where the Beacon API shines by allowing developers to send data to a server more reliably and efficiently.

Share This Post


Need help?

Let's have a chat...


Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 


Begin Your Learning Journey Today!

Come back inside to continue your learning journey.