脱jQuery体験 – selector編

こんにちわ、ななきです。

ここ2ヶ月くらいReactを書きながらwordpressもやるみたいな濃密な日々を過ごしていました。

どちらもあまり経験がない上にReactを使っているとjQueryを使っていられないので、
最近はjQueryでやっていたことを生のjavascriptに置き換える努力を始めたのでメモも兼ねて書きなぐっていこうかなと思います。

また、ある程度jQueryを使っている事を前提として進めていきます。

セレクターの指定

これはjQueryであれば下記のように直感的に指定が出来ますね。

コレをjavascriptに置き換えると下記のようになります。

これくらいであればなんとなく理解できそうですね。

ちなみに親・子要素、兄弟要素を取るには以下のようになります。

指定したセレクターを操作する方法

簡単に指定したセレクタを操作する方法もまとめたいと思います。

とりあえず指定したセレクターにクリックイベントを登録する的な事をやってみましょう

まずはidで指定してイベントを登録する場合から

次にclassで指定したときですね、classで指定した場合は単一のオブジェクトではなくHTMLCollectionオブジェクトという形式で返るため一手間必要になります。

このようにjQueryでは複数同じclassの要素があったとしても簡潔に書けますが、javascriptの場合は変数elementが配列にのような形のためfor文を用いてそれぞれにイベントを登録する必要があるんですね。

これはgetElementByTagNameの場合も同じになります。

まとめ

とりあえずセレクタの指定から簡単なイベント登録までやってみました。

慣れると簡単なのですが、仕組みがわかるまで大変だったので何回もconsoleとにらめっこしながら覚えてくのが良いと思います。

次回はわりとよくあるクラスの付替えや座標系、画面内に要素が入っていたらフェードインなど汎用的な部分もやっていけたらなと思っています。

Archives

MasatoChiba
Frontend Developer