0
1
テーマ、知りたいこと
JavaScriptで、xmlをdom上で操作しています。
clonenodeを使用して、ノードを複製した場合の動作について知りたいです。
背景、状況
clonenodeで複製した場合に、タグ名、要素名、属性名は、全く同じ形で複製されるのでしょうか。
また、複製されるタイミングをブラウザ上で確認できますでしょうか。
と言うのも、複製した後に、属性値をキーにして検索しに行き、書き換えたいと思っております。
その際に複製元と同じであれば、意図していない値まで描き変わってしまいます。
良い方法など対策が有りましたらご教授頂けたら嬉しいです。
宜しくお願い致します。
回答4件
#1
総合スコア114883
投稿2023/09/23 07:35
質問の意図がわかりかねますが、cloneNodeは実行した瞬間に同じ構成のノードを作成します
ただし既存のHTML要素にappendChildしなければ利用されることはありません
#2
総合スコア406
投稿2023/09/23 12:38
https://developer.mozilla.org/ja/docs/Web/API/Node/cloneNode
上記MDNより引用 (強調箇所のみ私が編集しています)
cloneNode() は Node インターフェイスのメソッドで、このメソッドが呼び出されたノードの複製を返します。 引数でノードに含まれるサブツリーを一緒に複製するかどうかを制御できます。
ノードを複製すると、固有（インライン）のリスナーを含む、ノードのすべての属性とその値が複製されます。
警告: cloneNode() を使用すると、文書内で要素の ID が重複する可能性があります。
元のノードに id 属性があり、複製を同じ文書に配置する場合は、複製の ID が重複しないように変更してください。
また、 name 属性も重複した名前を使わない場面では、変更する必要があるかもしれません。
返値
複製された Node を返します。 複製されたノードには、文書に所属する他のノードに Node.appendChild() などを使用して追加されるまで、親ノードがなく、文書にも所属していません。
以下細かい回答
タグ名、要素名、属性名は、全く同じ形で複製されるのでしょうか
yes
また、複製されるタイミングをブラウザ上で確認できますでしょうか
部分的にyes
「返値」の記述通り、そのままではどこにも所属していないため確認はできません。
appendChildするか、console.logなど使用したら中身まで確認できます。
なお「複製されるタイミング」≒「cloneNodeを呼び出したタイミング」で、特に確認する必要はないと思います。
複製した後に、属性値をキーにして検索しに行き、書き換えたい
その際に複製元と同じであれば、意図していない値まで描き変わってしまいます
「警告」の記述通り、必要に応じて複製の属性値などを書き換えるべきです。
なお最初の記述の通り、サブツリー（子要素）のみcloneNode()の引数で制御できます
#3
yambejpさん
回答ありがとうございます。
参考にさせて頂きます。
#4
pecmmさん
回答ありがとうございます。
ドキュメントなどの添付もありがとうございます。
細かくご意見頂きまして、とても参考になりました。
一旦ご教示頂きました情報をもとに自身で動かしてみたいと思います。
ご丁寧にありがとうございました。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。