[Javascript] cloneNode()した時のID重複を防止する方法

javscriptでエレメントコピー操作をした時に、コピー元にid属性が含まれていると、それも含めて複製されてしまうため、ページ内に同じ値のIDを持つエレメントが存在してしまう。 そもそも、ID属性は、CSSセレクタで指定できるので、classと同列にエレメントの振り分け要素として使われると思われがちですが、class名とID値はそもそもどう違うのかも理解せずに、フロントコーディングをやってしまうフロントエンジニアがいるとしたら、非常に危険な存在になってしまうので、是非とも学習してもらいたい。 IDとclassの使い方の違いと、cloneNode()関数を使った時にID属性を防止する簡単なソースコードを掲載しておきます。

重複IDによるトラブル

そもそもフロントコーディングにおいて、タグにclass属性とid属性をどの様に振り分けているのでしょう？ classは、ページ内に重複可能ですが、idが重複不可能という基本は分かっている人は多いようですが、大手企業のホームページを見ていると、意外と重複しているID属性を見かける事があります。 以前に努めていたWEBマーケティングツールを開発運用する会社では、そうした企業ページにjavascriptでアドオンするツールを提供していて、重複ID問題にかなり泣かれてきました。 idが重複していると、エレメント操作の基本である"getElementById"が使えなんだよね。 運が良ければ先頭のIDエレメントのみ取得できるかもしれませんが、やはりページ内に複数のIDがあると、JSエラーが起こりがちになってしまうので、どうしても避けたいところです。

classとidの違い

idはページ内でのユニーク値以外に制約はなさそうですが、classのルールはいくつかあります。 まず、class属性には、半角スペース区切りで複数のclass値を登録できる点がidと大きく違っています。 複数登録できるということで、柔軟なセレクタに対応できるという事ですが、値を付けたり削除したりする作業は少し煩雑になります。 使用できる文字はidは「半角英数と"_"（アンダースコア）」が正規ルールのようで、記号などはアンダースコア以外はあまり使わないほうがいいようです。 さらに、数字から始まる値も推奨されていないことを考えると、プログラム変数のような扱いであることがわかります。 一方class名は、"-"（ハイフン）を使って書かれているケースを多く見られますが、id値より少しゆるい感じのようですね。 以下はw3cのHTML時点をリンクしておきます。 気になる人は内容チェックしてみてください。 https://w3g.jp/xhtml/dic/id https://w3g.jp/xhtml/dic/class

cloneNode()の時にid値重複を防止する方法

See the Pen cloneNode_idCheck by YugetaKoji (@geta1972) on CodePen.

ブラウザのデバッグコンソールを見ると、id値の後ろに"_%タイムスタンプ"を追加しているのが分かります。 もっと気の利いたID値にしたいのであれば、 id_elements[i].id = id +"_" + (+ new Date()); この行を修正すれば、なんとかなります。 とりあえず、コピーする全ての要素のid値を変更するようにしていますので、お試しあれ。