The undocumented life of JavaScript’s parentNode property – Internet Explorer edition!

Did you know that the parentNode property in JavaScript doesn’t always point to the element’s parent??! And not only that, but that very same node that’s lying to you also appears multiple times in the DOM.

I didn’t want to have to tell you this way, but there’s just no way around it: in Internet Explorer 7 (I’ve left testing 6 and 8 as an exercise for the reader 🙂 ) the parentNode property can flat out lie to you – specifically – with pasted content in a rich text editor like TinyMCE. That’s right, a bold-faced chain-yanking tall-tale’d lie, and I’ll prove it to you.

Documented Behavior

According to the W3C documentation, “the parentNode property returns the parent node of a node.” And based on that, you would expect the following code to alert “true!” for as many times as the node has children:

var node = document.getElementById('someElement');
for(var i=0;i<node.childNodes.length;i++){
     alert(node == node.childNodes&#91;i&#93;.parentNode);
}
&#91;/code&#93;

This is true for the vast majority of cases, but is not always the case. I've found an exception in how Internet Explorer 7 handles pasted content inside rich text areas like <a href="http://tinymce.moxiecode.com/index.php">TinyMCE</a>. Even <a href="http://jquery.com/">jQuery</a> will select children who's parentNode is incorrect!

<h3>Just get to the Demo!</h3>
I've set up a <a href="http://welcome.totheinter.net/examples/tinymce/simple.html" target="_new">demo page</a> that can consistently repeat the bug. For the demo to work, you'll need to:
<ul>
	<li>use Internet Explorer 7</li>
	<li>open the <a href="http://welcome.totheinter.net/examples/tinymce/sample.rtf">attached rtf</a> in <strong>WordPad</strong></li>
	<li>paste into the TinyMCE content area</li>
	<li>press the "validate" button on the bottom toolbar</li>
</ul>
Besides IE's fearsome use of the <a href="http://www.w3schools.com/tags/tag_dir.asp">DIR tag</a>, you'll notice:
<ul>
	<li>I've painted duplicate nodes red in TinyMCE</li>
	<li>An brief XML output of the DOM is output into a text area beneath TinyMCE showing the duplicate node</li>
	<li>A count of each node is displayed as an attribute in the text area. Notice the count=2 in the nodes at the bottom of the textarea! Yikes!</li>
</ul>
If you're not in the mood to fire up the demo yourself, just click the link below to see what the DOM ends up looking like. Take special notice of the count=2 on the nodes at the bottom:

<a id="dom" class="code-link" href="javascript:;">View IE7's invalid DOM after a paste</a>


<h3>Try It Yourself!</h3>
For the demo, I created a simple TinyMCE plugin that validates the editor's DOM. Paste the magic text in IE7, and it'll mark any invalid nodes in red and also updates a textarea with a simplified XML representation of the DOM. The plugin uses both native JavaScript functions and jQuery to find nodes with invalid parentNodes.

<a id="plugin" class="code-link" href="javascript:;">View the plugin code</a>

<a href="http://welcome.totheinter.net/examples/tinymce/duplicate.zip">Download the plugin code</a>
<h3>A TinyMCE Bug?</h3>
An obvious question is: is this a TinyMCE bug? and the answer is "No." There is no way to manually add the exact same node to multiple places in the DOM. Instead, the browser simply moves the node to the new place, and removes it from its original location. Even if <a href="http://www.linkedin.com/pub/johan-%22spocke%22-s%C3%B6rlin/11/444/a04">Spocke</a> tried to create this bug, he couldn't 🙂

If you believe me, skip to the conclusion. If you don't believe me, open up <a href="http://welcome.totheinter.net/examples/tinymce/nodups.html" target="_new">this second demo</a> that uses the following code to append a node without calling removeChild() first. Even without specifically removing a node before appending it somewhere else, there still only exists one node in the document:


$(function(){
var node = document.getElementById("copyMe");
var target = document.getElementById("target");
target.appendChild(node);
});

In Conclusion

As far as parentNode is concerned, if:

  • you're writing a plugin for TinyMCE or similar
  • you're dealing with (possibly) pasted content
  • relying on parentNode

then:

  • validate! If(myNode != myNode.childNodes[i].parentNode) is true then you have a problem!

I hope you enjoyed the latest the-undocumented-life-of post! Also a fun read: The undocumented life of jQuery's .append()!

Close

[viewcode] src=/tinymce/3.2.5/jscripts/tiny_mce/plugins/duplicate/editor_plugin_src.js name=plugin lang=javascript[/viewcode]
Close

[viewcode] src=/tinymce/dom.txt name=dom lang=html[/viewcode]

6 thoughts on “The undocumented life of JavaScript’s parentNode property – Internet Explorer edition!

  1. Hmm I just tried this and the issue only occurs if you paste from WordPad. Pasting from notepad or Word returns what you expect. I think this is just how WordPad internally represents rich text and pasting in IE just faithfully retains that.

  2. Using a great tool called clipview, if you copy from Wordpad, then remove the \lang1033, you don’t get this problem. I’ve discovered this with other rich text content as well. The \lang controls seem to be what cause IE problems, though I don’t know why.

Leave a Reply

Your email address will not be published. Required fields are marked *