IE の cloneNode は似て非なるもの

js IE 問題

IE における cloneNode の困った挙動について調べてました。
cloneNodeの仕様

IEでオレオレ属性を追加しcloneNodeすると、参照が作成されてしまいます。

<div id="AAA">NodeA</div>

var AAA = document.getElementById("AAA");

AAA.oreoreAttr = { key: 1 };

var BBB = AAA.cloneNode(); // BBB を作成

AAA.oreoreAttr.key = 2; // AAA に 2 を設定すると…

alert(BBB.oreoreAttr.key); // BBB も 2 になってしまう

このような挙動が問題になるのは、以下のように、不可視な属性を設定していた場合に、cloneNodeで参照が作成されてしまい、あっちを変えるとこっちも変わってしまうケースです。

AAA["data-oreore"] = { key: "value" };
var BBB = AAA.cloneNode();

BBB["data-oreore"].key = "new value";  // AAA["data-oreore"]側も変化してしまい、こまったことになる
その前に

IE以外のブラウザでは、AAA.oreoreAttr のように setAttribute で設定されていないオレオレ属性は cloneNode でコピーされません。

<div id="AAA">NodeA</div>

var AAA = document.getElementById("AAA");

AAA.setAttribute("key", 1); // AAA.key は setAttribute で設定されたので cloneNode のコピー対象

var BBB = AAA.cloneNode(); // BBB を作成
alert(BBB.getAttribute("key")); // 1  (属性のコピーが作成されている)

AAA.setAttribute.key = 2; // AAA に 2 を設定しても…

alert(BBB.getAttribute("key")); // BBB は 1
さらに問題なのは

IE の cloneNode は、オレオレ属性のコピー + 参照を作成するだけでなく、イベントもクローンしてしまいます。
IE9pp2 でも IE8 と同様です。