javascript dom 操作 cloneNode テキスト ノードのクローン作成の使用法 skill_javascript スキル

true: ノードを完全にコピーします。完了とは、子ノードも含めてすべてをコピーすることを意味し、いわゆる完全な

false: 現在のノードのみを複製します。どのテキストにもそれを指すノード (テキスト ノード) があるため、子ノードのクローンは作成されません。また、もちろん、ラップするテキストのクローンも作成されません。
もちろん、場合によっては、この 2 つが汎用的に使用されることもあります。コピーされるノードは一致しません。たとえば、img...

誰もがより深く理解できるように、小さな例を示します。

コードをコピーします コードは次のとおりです。

Shadow ; |No Shadow

span ノードを指す変数を定義します

var element = document.getElementsByTagName('span')[0 ];
次に

コードをコピーします コードは次のとおりです。

var t1 = element.cloneNode(false).innerHTML;/ /子ノードをコピーしません
var t2 = element.cloneNode(true).innerHTML;//すべてをコピーします
alert(t1); ;

はい、(空) "" と Shadow が順番に出力されます。

コードをコピーします。 コードは次のとおりです: var textnode = element.firstChild; //テキスト ノードを指します

var t1 = textnode.cloneNode(false).nodeValue; t2 = textnode.cloneNode(true).nodeValue;

alert(t1);
alert(t2);


これは同時にシャドウを出力します。

[cloneNode bug]


上記のマルチレベルリンケージで述べたように、cloneNode はコンテナのコピーに使用されますが、cloneNode には IE にバグがあります。 ie では、attachEvent を使用してイベントを dom 要素にバインドすると、イベントは cloneNode の後にコピーされます。 addEventListener で追加されたイベントは、ie と ff でテストできません:

ディビジョン <div id="t"> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ] クリックie と ff では各 div がアラートをトリガーします。重要なのは 2 番目の div です。ff ではトリガーされませんが、ie ではトリガーされます。 もちろん、これがバグであるかどうかは明らかではありません。おそらく、attachEvent はもともとこのように設計されていたのでしょう。

しかし、最初のバージョンではこのバグのため cloneNode が使用されませんでした。

解決策を探す前に、この問題を拡張して、onclick イベントを直接追加することで同じバグが発生するかどうかを確認してください。
最初に要素内に onclick を追加してテストします:

ディビジョン <div id="t" onclick="alert(1)"> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります ] 結果は ie と ff の両方の Copy イベントに含まれます。

js に onclick を再度追加してテストします:

ディビジョン <div id="t"> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]
その結果、ie と ff ではイベントがコピーされなくなります。このバグが発生するのは、attachEvent だけのようです。

解決策は次のとおりです。
「Mastering JavaScript」で John Resig によって推奨されている addEvent メソッドとremoveEvent メソッドを使用します Dean Edwards がイベントを追加/削除します。
その利点は言うまでもなく、IE で前述した cloneNode のバグを解決できます。
その実装原則は、onclick を使用して ie でイベントをバインドすることであり、上記のテストは、onclick でバインドされたイベントが cloneNode によってコピーされないことも証明しているためです。