jquery $("#id")と$("div#id)の取得結果の違い

Question

jqueryの要素取得で、IDを取得する際以下のような記述の方法で取得するという記述をみました。
①$("#id名")
②$("div#id名")

①は、指定されたidで要素取得を行い、②はdiv要素の中から指定されたidで検索し取得する、取得結果は同じ、という認識でした。

しかし、記述の方法が2パターンあるくらいなので、厳密には取得結果の内容は異なるものなのでしょうか？
また、上記の記述方法の使い分けはあるのでしょうか？

ご回答いただけると幸いです。
よろしくお願いいたします。

Comments

[退会済みユーザー]

id は全ての要素のなかで一意にはしてないのですか？

[utubonu]

要素は一意なのですが、同一ページ内処理でIDの取得記述がバラバラでしたので、実は取得結果の違いがあるのでは？と思い質問させていただきました。

[退会済みユーザー]

> 要素は一意なのですが、

であれば、②$("div#id名") の出番はないと思うのですが。maisumakun さんの回答にあるように ②$("div#id名") は空振りになることがあります。空振りになることに意味があってわざわざそうしているなら話は別かもしれませんが。

Answer 1

取得結果は同じ、という認識でした。

当該idの振られたエレメントが<div>以外であれば、div#idは空振りになります。

Comments

[utubonu]

ご回答ありがとうございます。
共通処理で、同じ名前のIDでもタグが異なる場合は処理しない動きの時に使用するイメージですね。（あまりないかもしれませんが）
だいぶイメージがつかめてきました。ありがとうございます！

Answer 2

①<spna id=id名>
②<div id=id名>
③<ul id=id名>
④<table id=id名>

①$("#id名")

①～④まで全て該当する

②$("div#id名")

②のみ該当する

$("div#id名")というのは、「タグがdivでidがid名であるもの」なので、divでないものは該当しません。

Answer 3

#idは*#idと同じ要素を表現します。
Selectors Level 3

そのjQueryのコードが実行されるページが複数あり、同じIDがdiv要素以外の要素に指定されるかもしれない、と考えると違いが見てくるのでは。

実際には単に「短く書けるから」という理由だったりしますが。

Comments

[utubonu]

ご回答ありがとうございます。
確かに共通処理で、div要素以外でも同一の名前のIDがふられることを考慮する場合などで、使用する可能性がありますね。。。
そこまで考えが及びませんでした。ありがとうございます！

Answer 4

HTML次第です。
ただ、同一ページに同IDはHTML規約的にはNGです。「ID」なので、一意であることが保証される必要があります。

まあ「同じページには存在しないけどページによってつけられてるタグが違ってそのなかでもdivにつけられてる要素だけにイベントを当てたい」ということもあるかもしれませんが、そもそも名前の付け方や役割を考えた方が良いですし、大抵は同じタグで同じ役割で同じIDが付きます。

Comments

[utubonu]

ご回答ありがとうございます。
ページまたぎで使用される事まで思いつきませんでした。
使い分けのイメージが定まった気がします。
IDによって別処理になる場合は、IDのふり方をしっかり考慮したいと思います。
ありがとうございました！