Print HTML DOM Tree
In previous article we programmed two functions: to add and remove a table row. But we had one issue in Safari and Firefox by removing a row. We had to click Delete button twice. To understand why this happens we need to see the DOM tree of our table, which each browser builds. You can use browser plugins, but now we will just develop our own simple JavaScript function to print DOM tree.
Our function will get the reference to an element and we can run it in this way:
You need to know that every node has the property nodeType. If it's an element nodeType=1, it it's a text node (and can not have child nodes) then nodeType=3
-
function printDOMTree(Mid) {
-
var i; // for cycles
-
for (i=0;i<Mid.childNodes.length;i++) // go through all childs of our element
-
if (Mid.childNodes[i].nodeType==1) // if element
-
{ document.write('<br />[' + Mid.childNodes[i].nodeName + ']' ); // we will write its name in [name]
-
printDOMTree(Mid.childNodes[i]); // and recursively run our function for this element
-
document.write('[/' + Mid.childNodes[i].nodeName + ']' ); // writes element name in [/name]
-
}
-
else if (Mid.childNodes[i].nodeType==3) // if it's text
-
{
-
if (Mid.childNodes[i].nodeValue=='\n') // if this text is a pagebreak symbol \n
-
{ document.write('<br />[text:\\n]<br />' ); } // we will print it as \n just to see it in output
-
else
-
{ document.write('<br />[text:' + Mid.childNodes[i].nodeValue + ']<br />' ); } // else just write the text node
-
}
-
}
Now try this code:
Look the output of the function in different browsers and you will see, that IE and Opera DOM tree is like:
[TABLE]
[TBODY]
[tr]
[TD]
[text:sample 1]
[/TD]
[TD]
[text:sample text here...]
[/TD][/tr]
[tr]
[TD]
[text:sample 2]
[/TD]
[TD]
[text:sample text here...]
[/TD][/tr]
but in Firefox:
[tr]
[TD]
[text:sample 1]
[/TD]
[TD]
[text:sample text here...]
[/TD][/tr]
[text:\n]
[tr]
[TD]
[text:sample 2]
[/TD]
[TD]
[text:sample text here...]
[/TD][/tr]
[text:\n]
We have additional text nodes (\n - pagebreaks) after each <tr>. That's why when we try to delete the last child of tbody in IE we delete the tr element but Firefox we delete text node with "\n" and the second click deletes tr element. Also when we add new row we don't use pagebreaks, that's why it's deleting in a Firefox in one click.
If we'll change the table code to:
-
<div id="DOMTree"><table border="1" cellpadding="5"><tbody id="myT"><tr><td>sample 1</td><td>sample text here...</td></tr><tr><td>sample 2</td><td>sample text here...</td></tr><tr><td>sample 3</td><td>sample text here...</td></tr><tr><td>sample 4</td><td>sample text here...</td></tr><tr><td>sample 5</td><td>sample text here...</td></tr><tr><td>sample 6</td><td>sample text here...<img src="" /></td></tr></tbody></table></div>
then we won't have such problem. Other way to fix a little bit our delete function. How to make this? Tomorrow you will know 
[…] promised you to improve table row delete function, that’s what we will do today. So now we know the differences of DOM tree in different browsers. We saw that Firefox and Safari create additional text node “n” so there are two ways to fix our […]
Pingback by Volodymyr Osypov blog » HTML DOM, JavaScript to add/remove table rows (part 2) — May 23, 2008 @ 3:11 pm