Node Value

Share This Post

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


Demystifying Scrum User Stories Confirmation: Ensuring Quality and Collaboration

One of the key elements of Scrum is the use of user stories to define the requirements of a system or feature from the perspective of the end user. As teams work through the product backlog, it becomes crucial to confirm the user stories to ensure they meet the desired criteria and are ready for development. In this blog post, we’ll explore the concept of Scrum user stories confirmation and its significance in delivering high-quality products.


The Power of Conversations in Scrum User Stories

At the heart of Scrum lies the concept of user stories, which serve as a means of capturing requirements from the perspective of end-users. However, the true power of user stories lies not just in their written form but also in the conversations that take place around them. In this blog post, we will explore the significance of conversations in Scrum user stories and how they contribute to the success of Agile projects.

Do You Want To Boost Your Business?

drop us a line and keep in touch

Scroll to Top

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.