Posted at

jQueryのサンプルを見かけたら標準APIでも書いてみる。(selector 絞り込み

jQueryのサンプルを見かけたら標準APIでも書いてみます。

仮想DOM等他のライブラリ使わない、thisもなるべく使わない縛りです。

よく見かける、親セレクタを変更時に子セレクタを絞り込む実装です。

https://qiita.com/BRSF/items/1aa9d154bde497b0baa0

https://try-m.co.jp/blog/web-create/936/


方針


  • 最初の子セレクタの順番をキャッシュしておく(ref

  • DocumentFragment を backgound と foreground として使い リアルDOMへのappendChildはなるべく一回で済ます。

  • selected なるべく維持する


こうしました。

https://qiita.com/BRSF/items/1aa9d154bde497b0baa0


See the Pen
select filter
by kei nakoshi (@nakoshi-k)
on CodePen.

https://try-m.co.jp/blog/web-create/936/


See the Pen
VJpEbE
by kei nakoshi (@nakoshi-k)
on CodePen.