背景
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はユニーク」という前提を考慮していませんでした。