javascriptの成長について行くのに、一生懸命な、ユゲタです。
DOM操作は、webサイトを構築する上では、必須の処理になるので、javascriptでは、この操作を覚えないとまるで開発が進みません。
他のプログラム言語では、xml操作が少しだけ似ているんですが、とにかく成長言語真っ只中のjavascriptｈは、DOM操作関数が半端なくたくさんありますし、今もどんどん生まれてきています。
このDOM操作という処理を使いこなせてこそwebエンジニアを極めると言ってもいいかもしれないのですが、これまでcssなどでも、とかく苦手な処理であった上位要素検索が、javascriptで関数として備わっている事を、先日作業をしているときに、フと見つけてしまいました。
今後はこの関数を使い倒すために、自分で調べたこの関数についてブログに書いて残しておきたいと思います。
Element.closest(%maches)
その便利な関数名は、
closestです。
とりあえず、リファレンスサイトのリンクを付けておきます。
参考 : mdn web docs : Element.closest()
書かれている説明は以下のとおりです。
closest() は Element インターフェイスのメソッドで、この要素とその親に（文書ルートに向かって）、指定された CSS セレクターに一致するノードが見つかるまで探索します。
要するに親要素（rootまで）の検索を行ってくれる命令です。
サンプルを用意したので、これを見たほうが早いですね。
<div class='a'>
<div class='b'>
<div class='c'></div>
</div>
</div>
<script>
const c = document.querySelector('.c')
const elm = c.closest('.a > div')
if(elm){
console.log('exist',elm)
}
else{
console.log('none')
}
</script>
このHTMLファイルをブラウザで開いて、javascriptコンソールを見てみると、以下のように表示されています。
exist ...
これは、.c要素の上位階層で、".a > div"というselectorにマッチする要素を検索して、.bにたどり着いたという事でその対象エレメントが取得されています。
マッチする対象エレメントが複数あった場合は、どうなるんでしょう？
<div class='a'>
<div class='b'>
<div class='c'></div>
</div>
<div class='b2'></div>
</div>
同じ検索処理でdom構造に、.aの下に要素を追加してみました。
結果は、最初と同じでした。
という事は、検索元のエレメントの親になる要素が返ってくるので、複数ということはないんですね。
う〜ん、こちらの想定内の結果にかなり使える機能だと判明！
対応ブラウザ
おなじみのcan i useで調べてみると・・・
https://caniuse.com/?search=closest
想像通りIEだけNGですね。
その他のブラウザは、まあまあ初期バージョンから採用されていたんですね・・・知らんかった・・・
そして、リファレンスサイトで、IEのポリフィルも書かれている上、そのポリフィルがかなり効率的なコードだったので、非常に参考になりました。
え？ポリフィルって何かって？
プログラミングをやっているとたまに目にするこの言葉は、「古い環境（ブラウザの種類やバージョン）で、それを補って使えるようにしてくれる処理の事で、ライブラリとしても調べるとたくさん出てきます。
まあ、この機能については、IEが鬼門だという事ぐらいなので、無視していい環境であれば、無問題（モーマンタイ）でしょう。
javascriptが難しいと思う人に向けて
今回の記事の何が便利なのかよくわからないと思いますが、実際にwebページを作って、システム対応する時に、この機能の有り難みを感じることができます。
ようするに、この機能が便利だと気がつくレベルを一つの指標にしてみるというのも良いかもですね・・・
さて、この機能、一体全体、どういう場面で使うのが効率的なんでしょう？
個人的には、イベント処理の発火処理を書く時によく使うので、そういう場面が思い浮かぶようになると、もはや柔軟にJavascriptが使えるようになるんじゃないでしょうか？
わからないことを調べるのって、本当に面白いですね。
0 件のコメント:
コメントを投稿