脱jQuery メモ
2022/04/29
複数のクラス指定で要素を取得
const elms = document.querySelectorAll('.hoge, .fuga');
.querySelectorAll('selectorNames') でOK。
on
.addEventListener('eventName', function)
複数の要素に対するイベントハンドラ
elms.forEach(elm => {
elm.addEventListener('click', process);
},
false);
親要素・祖先要素
.closet('.parent')
子要素
- 脱jQuery!DOM要素取得コードの素のJavaScriptへの書き換え │ Webty Staff Blog
- 【JavaScript】脱JQuery！？メソッドを比べてみた！要素取得編 - Web.fla
jQuery の .children('selectorName') は一応プレーンな JavaScript にも .childrenプロパティ があるものの、そこでセレクタ指定はできなさそう。
クラス名全てを取得
jQuery では .prop('class') としていたところですが、 .className でOK。
子孫要素の中から探す
jQueryでは .find() だったところを、 elm.querySelector('selectorName') と指定すればOK。
幅
- スクリーン・ウインドウ・画面サイズをjavascriptで取得する方法まとめ | WEMO
- 脱jQuery .innerHeight() .innerWidth() .outerHeight() .outerWidth() | q-Az
- ウィンドウサイズとスクローリング
jQuery で $(window).outerWidth() としてたところを、今回の用途では window.innerWidth へ。
クラスの存在チェック
jQuery では .hasClass('className') だったところを、 .classList.contains('className') へ。
イベントハンドラの指定とイベント発火要素の取得
普通に関数指定で elm.addEventListener('click', hoge(elm), false) と書いてしまったが、これだとその関数の実行結果が渡されるとのこと。しかもイベント発火時ではなく該当コード読み込み時に実行されてしまう。
第二引数はオブジェクト (または JavaScript の純粋な関数) なので elm.addEventListener('click', hoge, false) と関数名だけにしなければならない。
が、 const hoge = (e) => { /* 処理 */ }; で普通にイベントは渡ってくるので e.currentTarget とすればクリックした要素が取得できるので大体問題ない。
イベント発火
elm.dispatchEvent(new Event('click'))