javascript

CHAPTER 7 ■ TRAVERSING AND MODIFYING THE DOM TREE
302
Where Did the Formatting Text Nodes Go?
Now let’s think this through. orderUL() plucked elements from the DOM tree and reinserted them
at the very end of the NodeList in the childNodes member of their parent element. Say that three
times fast. Anyway, the formatting Text nodes were left alone. Therefore, after plucking an from the
tree, the formatting Text nodes that were on either side of the wind up next to each other. By the
time orderUL() finishes its work, the formatting Text nodes are bunched up at the beginning of the
NodeList in the childNodes members of the elements.
Rather than take my word for it, refresh Firefox, and run the following amended sample:
var myElements = document.getElementsByTagName("ul");
function orderUL(root) {
var nodeList = root.getElementsByTagName("li"), helperArray = [], i;
for (i = 0; i < nodeList.length; i ++) {
helperArray.push(nodeList[i]);
}
helperArray.sort(function(li1, li2) {
var txt1 = li1.getElementsByTagName("a")[0].firstChild.nodeValue.toLowerCase();
var txt2 = li2.getElementsByTagName("a")[0].firstChild.nodeValue.toLowerCase();
if (txt1 < txt2) {
return -1;
} else if (txt1 > txt2) {
return 1;
} else {
return 0;
}
});
for (i = 0; i < helperArray.length; i ++) {
helperArray[i].parentNode.appendChild(helperArray[i]);
}
}
orderUL(myElements[0]);
myElements[1].childNodes;
JavaScript then prints the following in Firebug:
[, , ,
, , ,
, , ,
, , ,
, , ,
, li, li, li, li, li, li, li, li, li, li, li, li, li, li, li]
So, although you initially had 17 formatting Text nodes interspersing 15 Element nodes, now
you have 17 formatting Text nodes followed by 15 Element nodes. Having those formatting Text
nodes bunched together does no harm. But if you want JavaScript to fold those 17 formatting Text nodes
into one, call Node.normalize() on their parent or any other ancestor. JavaScript will then merge any
adjacent Text nodes and delete any empty ones. Note that, by empty Text nodes, I mean those that do
not even represent whitespace. As you might imagine, empty Text nodes are as rare as formatting Text
nodes are prevalent.
Refresh Firefox; then run the following amended sample:
var myElements = document.getElementsByTagName("ul");
function orderUL(root) {
var nodeList = root.getElementsByTagName("li"), helperArray = [], i;