脱jQuery .find()

.find()

カッコの中身によって色々なパターンがあります。

jQuery（カッコ内が class）

$("#main").find(".menu");

書き換え JavaScript（カッコ内が class）

document.getElementById("main").getElementsByClassName("menu");

.getElementsByClassName で .menu の class がついたもののみを抜粋します。.getElementsByClassName は document の後でなくてはいけないというルールはなく、このように用いることで #main 内の .menu のみ抜粋できます。

jQuery（カッコ内が tag）

$("#main").find("a");

書き換え JavaScript（カッコ内が tag）

document.getElementById("main").getElementsByTagName("a");

.getElementsByTagName も同様に document の後に置く必要はありません。このように用いることで .find() と同じ働きをします。

jQuery（カッコ内が複雑）

$("#main").find("ul li");

書き換え JavaScript（カッコ内が複雑）

document.getElementById("main").querySelectorAll("ul li");

カッコ内が1要素ではなく複数要素の場合です。この場合は .querySelectorAll を用いればOKです。querySelectorAll も document の後ろに置く必要はありません。

jQuery（カッコ内が id）

$("#main").find("#menu");

カッコ内が ID の場合は普通の状態であれば ID は1つしかありませんので、jQuery 自体もわざわざ find() を用いる必要などなく $("#menu") で十分なはずです。 何らかの理由で jQuery 自体をこのように設定しなくては行けない理由がある場合のみ、以下のように書き換えます。

書き換え JavaScript（カッコ内 id）

document.getElementById("main").querySelector("#menu");

.querySelector は .querySelectorAll と似ていてカッコ内を CSS のセレクタのように記述できる命令です。.querySelectorAll との違いは条件に当てはまる要素の内一番最初の要素のみ持ってくる命令です。つまり1つだけ持ってきます。id は1つしか無いのでこの命令でOKです。

id で要素を取得するは通常 .getElementById を使いますが、これは document の後ろに置かなくてはいけない、というルールを持っています。上記の .getElementsByClassName や .querySelectorAll などはそういう必要はないのですが、id のみ厳密に決まっています。ですので、この場面では .getElementById は使えません。面倒くさい取り決めですが id は1つしか無いというルール上そのようになってます。

まとめ