こんにちは！wdtチームの山本です。
今回は、jQueryで要素を取得する際によく使用される「find()」と「children()」の違いについて解説します。
どちらも子要素を取得するメソッドですが、取得できる範囲が異なるため、使い分けを理解しておくことが重要です。
初めのうちは「何が違うのか分かりづらい」と感じやすい部分ですが、取得範囲を理解することで、DOM操作がより分かりやすくなります。
前回の記事
find()とchildren()の違い
find()は、「子孫要素すべて」を取得します。
children()は、「直下の子要素のみ」を取得します。
似たメソッドですが、取得できる範囲が違います。
children()とは？
HTML
<div class="box">
<div class="item">item</div>
<div class="list">
<div class="text">text</div>
</div>
</div>children()は、指定した要素の「直下」にある子要素だけを取得します。
jQuery
$(function(){
$(".box").children();
});この場合、取得される要素は以下になります。
- item
- list
つまり、.boxのすぐ下に存在している要素だけが取得対象になります。
一方で、.listの中にある.textは取得されません。
children()は「一階層下だけ」を対象にしているためです。
find()とは？
HTML
<div class="box">
<div class="item">item</div>
<div class="list">
<div class="text">text</div>
</div>
</div>find()は、指定した要素の中に存在する「子孫要素すべて」を取得します。
jQuery
$(function(){
$(".box").find("div");
});この場合、取得される要素は以下になります。
- item
- list
- text
find()は直下だけではなく、そのさらに下にある要素も取得できます。
そのため、深い階層の要素をまとめて取得したい場合によく使用されます。
しかし、find()は要素を指定しないと取得できないので注意が必要です。
実際に比較してみる
HTML
<div class="box">
<div class="item">item</div>
<div class="list">
<div class="text">text</div>
</div>
</div>jQuery
$(function(){
console.log($(".box").children("div"));
console.log($(".box").find("div"));
});実行
| メソッド | 取得される要素 | 条件指定※()内の指定 |
| children(“div”) | item / list | 必須（空だとエラー） |
| find(“div”) | item / list / text | 省略OK（空なら全取得） |
使い分けのポイント
children()を使う場面
- 直下の要素だけ取得したい
- 不要な要素を取得したくない
- リストなどで複数の直下にあるものを取得したい
find()を使う場面
- 深い階層の要素を取得したい
- フォームなどのinputの要素をまとめて取得したい
find()の方が便利だと思いますが、必要以上に取得してしまうと想定外の要素まで取得してしまうかもしれないので、そのため使い分けることが大切です。
まとめ
jQueryのfind()とchildren()は、どちらも子要素を取得するメソッドですが、取得できる範囲が異なります。
children()→ 直下の子要素のみ取得
find()→ 子孫要素すべて取得
DOM操作では非常によく使用するメソッドのため、それぞれの違いを理解しておくことで、より正確に要素を操作できるようになります。
実際にconsole.logなどで取得結果を確認しながら試してみると、違いがより分かりやすくなるので、ぜひ動作を確認しながら試してみてください。
