Webolution Designs Musings

Various posts on technology (code/programming). Our hope is that these posts improve your world.

Recent blog posts

Posted by on in JavaScript

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...

<p id="myP">This is my paragraph content.</p>
<script>
    // 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.";
</script>

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.

...
Hits: 249
Rate this blog entry:
0

Posted by on in JavaScript

In today's post, I would like to discuss climbing a tree. Odd? Well, I am not speaking of a traditional tree climb, but rather climbing the DOM tree.

The HTML DOM is like a 'tree'...a hierarchy. Each 'leaf' on the tree is called a node. Nodes can be parent nodes and/or child nodes. Each node has a type...

  • Document
  • Element
  • Text
  • Attribute

We climb the tree by tapping into the document object. Think of this as the 'trunk' holding the 'tree' together. The document object has several methods and properties that we can use to traverse the DOM. We have already seen an example of this in a previous post. Let's look at some of the DOM properties we can utilize...

...
Hits: 247
Rate this blog entry:
0

Posted by on in JavaScript

There are times when you wish to change the content in your application. Perhaps you have pulled new data from a data source, or the end user has done something that requires a change to the content. There are several ways to do this. In today's post, I would like to focus on one simple way to achieve this functionality...innerHTML.

Now...disclaimer...innerHTML is not an official standard per the specs out there even though it is support by all the major browsers. There are other "official" ways to do this and I plan on exploring those in future posts. innerHTML was something that Microsoft came up with for IE and the other browsers decided to support it as well...everyone gets lucky once in a while (if you haven't figured it out yet...not a fan of IE). Regardless of how we arrived to the functionality, it is an easy way to instantiate this functionality. So how does it work...?

<!-- Div to hold example content -->
<div id="myDiv">
    <p>This is the content within my div</p>
</div>
<!-- Button to click to change content -->
<button id="btnChange" onclick="changeContent();">Change Content</button>
<script>
    // Function that changes the div content using innerHTML
    function changeContent(){
        var myDiv = document.getElementById("myDiv");
        myDiv.innerHTML = "Here is the new content!";
        return false;
    }
</script>

If you try out the aforementioned code, you will see that changing content is extremely easy with innerHTML...just not a specification standard.

...
Hits: 256
Rate this blog entry:
0

Posted by on in JavaScript

Fortunately, JavaScript gives us tons of ways to delve into the DOM and slice & dice it to suit our application's needs. If you use a framework, such as jQuery, there are sometimes more methods. Today, I would like to look at two...

getElementById()

This method allows us to grab an HTML element based upon the element's ID. Here is an example...

<div id="myDivID">
    Some Content
</div>
<script>
var myDiv = document.getElementById("myDivID");
</script>

With the above method, as long as we have ID'd elements, we can grab any element we wish and then hold it in a variable to manipulate as we desire.

...
Hits: 276
Rate this blog entry:
0

Posted by on in Programming

Over the next several posts, I am planning on diving into the Document Object Model (DOM). Before we do that, however, I wanted to spend a post discussing why it is important to understand and utilize the DOM. First...what is the DOM? A quick, thirty-thousand foot fly by definition is basically the structure of an HTML document. Think of it like a tree. each element is a node on that tree. For example, the body tag...that is a node. Imagine you have a wrapper div inside of that. That wrapper div is also a node. In fact, it is a child node of the body tag, which is its parent node.

We can tap into the DOM with our JavaScript code, which allows us to manipulate the DOM to suit the needs of our program. Why would we want to do that. Besides the coolness factor, it is to provide a better experience for our end user.

The term user interface (UI) has been around a while and speaks to the way a program is laid out and works from the end user perspective. Some time ago, the term user experience (UX) came into vogue. While the term UI is still utilized, the term UX speaks to a deeper level of user interactivity. As developers we want to have our end user have more than a nice time utilizing our program. We would like them to have an experience. Dare I say, a 'movie-like' experience? 

...
Hits: 252
Rate this blog entry:
0

Get in touch

Go to top