Secret Covert Hush-Hush White Space in the DOM…EXPOSED!

Lurking in the shadows of the Stack Overflow website, selling aerosol cans of Bug-No-More to the rubes, I came across a question I thought I could answer. The OP (original poster) was using JavaScript to select and modify HTML elements without success.

The HTML was simple:

    <li><a href="#" id="prev">Prev</a></li>
    <li><a href="#" id="middle">Middle</a></li>
    <li><a href="#" id="next">Next</a></li>

First he created a simple function to make sure the basics were working (a very good practice). It colored the middle li element and it worked fine:

function middle()
    document.getElementById("middle") = "yellow";
  • get the middle element using its id (an a tag)
  • move up one element via the parentnode (to the li)
  • color the li


 Next, he created a function to color the siblings of the middle element.

  • get the middle element using it's id (an a tag)
  • move up one element via the parentnode (to the li)
  • get the previous/next sibling
  • color the li 
function prevNextSibling()
    document.getElementById("middle") = "pink";
    document.getElementById("middle") = "cyan";

It didn't work.

When I debugged the code, I saw that nextSibling was returning an object that did not have a style property. What the heck was up with that?

In FireFox the debugging window looked like this:

In Chrome the debugging window looked like this:


In Internet Explorer the debugging window looked like this:


Hey, what the heck are those "Text = Empty Text Nodes" in the Internet Explorer window? What they are, my curious friend is the cause of the problem: nextSibling and previousSibling are returning Empty Text Nodes which do not have a style attribute.

To be perfectly clear:

  • ALL three browsers have Empty Text Nodes.
  • ONLY Internet Explorer displays them in its debugger.

Internet Explorer is the best browser in this situation.

So what are these Empty Text Nodes?

 And what is the fix?

If the siblings are the same type, as they are in the original problem, use:



Otherwise, move two siblings to skip over the Empty Text Node sibling:



 Either way, it works:


Oooh, pretty.

So, in addition to learning about white space nodes in the DOM, we learned that having multiple browsers installed can be a good thing.

I hope someone finds this useful.

Steve Wellens

1 Comment

Comments have been disabled for this content.