HTML
CSS

IDが重複している場合の動き

背景

HTMLで、ID属性の値はページ内で一意である必要があります。重複してはいけません。
http://www.html5.jp/tag/attributes/id.html

しかし、JavaScriptライブラリを使うとIDが重複してしまう場合があります。
たとえば、FixedMidashiというテーブルのヘッダを固定するライブラリでは、対象のテーブルをコピーして固定するヘッダ部分を作成します。対象テーブル内の要素にIDが指定されていると、IDが重複しまいます。

工夫すればIDがユニークになるように実現できますが、FixedMidashiを使った場合は「IDが重複している」ことを諦めた方がラクでした。

そこで、IDが重複している場合の動きをまとめます。
以下のようなHTMLで動作を確認します。

sample.html
<div id="bar">
  #bar 1個目
  <p>Pタグ</p>
</div>

<div id="bar">
  #bar 2個目
  <p>Pタグ</p>
</div>

See the Pen IDが重複している場合の動き by yuji38kwmt (@yuji38kwmt) on CodePen.

環境

  • Google Chrome 65.0.3325.181
  • jQuery 3.3.1

JavaScriptの動き

console
document.querySelectorAll("#bar").length; //⇒ 2
$("#bar").length; //⇒ 1

$("#bar p").length; //⇒ 2
document.querySelectorAll("#bar p").length; //⇒2
  • document.querySelectorAllとjQueryで取得できる件数に違いありました。
  • jQueryは「IDはユニーク」という前提を考慮した結果を返すのに対して、document.querySelectorAllは考慮していませんでした。
  • #bar pのようにIDが指定された要素の子孫を指定した場合、jQueryは「IDはユニーク」という前提を考慮していませんでした。ハマったところです。

CSSの動き

sample.css
#bar { /* 重複しているIDを指定 */
  color:red;
}
  • CSSは「IDはユニーク」という前提を考慮していませんでした。

参考サイト

jQueryセレクタ id重複時の挙動テスト