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 なるべく維持する

こうしました。

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

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