なんだかんだ便利なjQuery。

最近たまに、jQueryが使えないことがあるので、バニラjsで書くことがあります。

バニラjsでモジュール作るために、色々調べて何が使えて、何が便利かわかったので、メモ的にこの記事でまとめます。

バニラjsでDOMの選択

ちゃんとやる?のならdocument.getElementById()を使うのでしょうが、とりあえずDOMを選択したいなら、querySelectorAllを使うと楽です。

ID、CLASS、タグをDOMで取得

querySelectorAllは以下のような感じで書きます。

// 要素全体の1番目の#idを選択
document.querySelectorAll('#id')[0];

// 要素全体の4番目の.classを選択
document.querySelectorAll('.class')[3];

// 要素全体の1番目のpタグを選択
document.querySelectorAll('p')[0];

結構簡単にDOMが選択できます。querySelectorAllは配列で入るので、1つのDOMに何か動作させるのなら、配列で選んであげてください。

ちなみに、特定のDOMの中から、特定のclassを選択したいのなら、

// 1番目の#idから.classを選択する
let getDom = document.querySelectorAll('#id')[0];
getDom.querySelectorAll('.class');

こんな感じで、documentの部分を特定のDOMに変えればOK。

早くDOMを取得する

より高速にidやclass、タグ名で選択する方法も記載しておきます。

// #idを取得
document.getElementById('id');

// .classを取得 (配列で入る)
document.getElementsByClassName('class');

// pタグを取得 (配列で入る)
document.getElementsByTagName('p');

丁寧に書くのならこっちかなと。

バニラjsでDOMをfor文で一気に処理する

jQueryだとfor文使わなくても、色々できちゃいますが、バニラjsだと無理なので、複数の要素を処理したいときはfor文を使いましょう。

// 全てのspanタグを選んでfor文で回す
let getSpan = document.querySelectorAll('span');
for(let i = 0; i < getSpan.length; i++){
 // ここに何か好きな処理
  console.log(getSpan[i]);
}

バニラjsでcssを操作する

DOMのcssを変更する

// 最初の.classを選んで display: none; へ
let getClass = document.querySelectorAll('.class')[0];
getClass.style.display = 'none';

// 最初のspanを選んで color: #000; へ
let getSpan = document.querySelectorAll('span')[0];
getSpan.style.color = '#000';

(DOM.style.プロパティ名) = ‘CSSの値’;

↑な感じでcssは変更できます。

現在のDOMのcssの値を取得する

// 最初のspanを選んでcssのcolorの値を取得
let getSpan = document.querySelectorAll('span')[0];
getSpan.style.color

.styleの後のプロパティ名の一覧は以下サイトにあります。
https://hakuhin.jp/js/style_declaration.html

バニラJSでDOMへClassの操作

クラスを追加・削除・トグル(なかったら追加、あったら削除)

let getDom = document.querySelectorAll('div')[0];

// .classを追加
getDom.classList.add('class');

// .classを削除
getDom.classList.remove('class');

// .classをトグル(なかったら追加、あったら削除)
getDom.classList. toggle('class');

DOMのクラス名を取得

// 1番目のdivのクラス名を取得
let getDom = document.querySelectorAll('div')[0];
getDom.className;

バニラjsでDOMのdata属性やaltなどの色々取得

// 1番目のdivタグのdata-nameを取得
document.querySelectorAll('div')[0].getAttribute('data-name');

// 1番目のimgタグのaltを取得
document.querySelectorAll('img')[0].getAttribute('alt');

// 1番目のaタグのhrefを取得
document.querySelectorAll('a')[0].getAttribute('href');

フォーム関連

知ってると意外と楽にform関連は操作できたりします。

inputタグのvalueを取得・代入

// 1番目のinputタグのvalueを取得
document.querySelectorAll('input')[0].value

// 1番目のinputタグに「バリュー」というvalueを代入
document.querySelectorAll('input')[0].value = 'バリュー';

inputタグをname属性で指定する

// name='nameData'なinputタグを取得する
document.getElementsByName('nameData')[0]

チェックボックスの状態を取得・checkedをつける

// name='nameData'なinputタグのchecked状態を取得する(checked:true、なければ:false)
document.getElementsByName('nameData')[0].checked

バニラjsでフォームを送信する

// formタグのname='formName'なformを送信する
document.formName.submit();

バニラjsでDOMにhtmlを挿入する、DOMのhtmlを取得

// class="js-dom"のhtmlを取得
document.querySelectorAll('js-dom')[0].innerHTML

// class="js-dom"の中にhtmlを挿入する
document.querySelectorAll('js-dom')[0].innerHTML == '<p>DOMを挿入するぜ</p>';

バニラjsでクリックとかのイベント管理はaddEventListenerで

jQueryだと、

$(‘div’).click(function(){ …. });

みたいなのでイベント関連、つまり特定の動作をしたら変化を起こすような処理をしていました。

バニラjsでやる場合は、addEventListenerを使って行います。

// 1番目のspanタグをクリックした時に、function testFunction() を実行します。
let getSpan = document.querySelectorAll('span')[0];
getSpan.addEventListener('click', testFunction, false);

↑のようにようにして、

(DOM).addEventListener(‘イベント’, 関数名,false);

という風にして、記述します。以下リンクにどんなイベントがあるのかまとまっています。

clickやload、scrollなどなど、色々あります。

https://qiita.com/mrpero/items/156968e3512d42fffc5e

addEventListenerの注意点1:関数に()はつけない

addEventListenerの第二引数の関数に()はつけてはいけません。つけると動きません。注意してください。

addEventListenerの注意点2:ブラウザによってイベントが微妙に違う

ブラウザによって微妙にaddEventListenerの挙動が違うので、ブラウザによって微妙に動作に差が出る場合があります。特にinput関連は結構違う気がしているので、デバッグは注意深くしたほうが良さげ。

addEventListenerでクリックしたものを引数を与えるには

function testClickFunction(e){
  console.log( e.target);
}

targetを使えば、クリックしたものが取得されているので、このようにすればOK。

addEventListener以外でイベントを記述する方法

// 1番目のspanタグをクリックした時に、functio()の中身を実行
let getSpan = document.querySelectorAll('span')[0];
getSpan.onclick = function(e) {
 console.log(e.target);
});

まとめ:バニラjsでも結構いろんなことができる

最後まで読んでくれた方はわかると思いますが、バニラjsでも結構色々できます。

なので、脱jQueryもいける!

のですが、バニラjsだとブラウザ毎に動作が違うっぽいので、デバッグに苦労します。(実体験)

ブラウザ対応とか考えるとなんだかんだjQueryは便利なので、Web制作ならしばらく現役な気がします。

フレームワーク使わないのなら、無理にバニラでやらなくていいのかなと。