🐙
jQueryネからVanilla JSへの書き換え方まとめ
概要
今だにjQueryは便利なんだけど、世の中的にはVanillaJSなので、メモがてら。
ネットで探せば同じような記事がわんさか出てくるので、ほんとメモ用。
随時メモしていく予定。
クラス操作
クラス操作に関するまとめ
//クラスの追加
$("#hoge").addClass('add-class');
document.getElementById('hoge').classList.add('add-class');
//クラスの削除
$("#hoge").removeClass('remove-class');
document.getElementById('hoge').classList.remove('add-class');
//クラスのトグル
$("#hoge").toggleClass('toggle-class');
document.getElementById('hoge').classList.toggle('add-class');
属性の取得、設定、削除
//属性値の取得
$("#hoge").attr('href');
document.getElementById('hoge').getAttribute('href');
//属性値のセット
$("#hoge").attr('href','https://yahoo.co.jp/');
document.getElementById('hoge').setAttribute('href', 'https://yahoo.co.jp/');
//属性値の削除
$("#hoge").removeAttr('href');
document.getElementById('hoge').removeAttribute('href');
//data属性の設定
$("#hoge").data("fuga","hello");
document.getElementById('hoge').dataset.fuga = 'hello';
//data属性の取得
$("#hoge").data("fuga");
document.getElementById("hoge").dataset.fuga;
//data属性の更新
$("#hoge").data("fuga","変更したい値");
document.getElementById('hoge').dataset.fuga = '変更したい値';
スタイルの取得、設定
//取得
$elem.css('background-color');
document.getElementById('hoge').style.backgroundColor;
//セット
$elem.css('background-color','#000');
document.getElementById('hoge').style.backgroundColor = '#000';
//複数セット：javascriptの場合、複数を一括で設定できない
$elem.css({'color': '#fff', 'background-color':'#000'});
elem.style.color = '#fff';
elem.style.backgroundColor = '#000';
cssのプロパティは通常「background-color」と書くけど、JavaScriptの場合「backgroundColor」と「-」の後を大文字にする。
親要素、子要素、兄弟要素の取得
//親要素
const $parent = $elem.parent();
const parent = document.getElementById('hoge').parentNode;
const parent2 = document.getElementById('hoge').parentElement;
//子要素
const $children = $elem.children();
const children=document.getElementById('hoge').children;
//兄弟要素の取得
$elem.css({'color': '#fff', 'background-color':'#000'});
elem.style.color = '#fff';
elem.style.backgroundColor = '#000';
兄弟要素をすべて取得したい場合
jQueryでいうnextAll()という兄弟要素をすべて取得するメソッドがありますが、これをネイティブのJSでやる場合。
<p class="hoge">最初の要素</p>
<a href="#">リンクA</a>
<a href="#">リンクB</a>
<p class="active">りんご</p>
<p>みかん</p>
//jQueryの場合
$('.hoge').nextAll();
$('.hoge').nextAll('.active');
//vanillaJSの場合
function nextAll(node, selector) {
var list = [];
var next = node.nextElementSibling;
while (next && next.nodeType === 1) {
list.push(next);
next = next.nextElementSibling;
}
if (selector) {
var node = [].slice.call(document.querySelectorAll(selector));
list = list.filter(function (item) {
return node.indexOf(item) !== -1;
});
}
return list;
}
var lists = nextAll(document.querySelector(".hoge"));
最初、最後の要素の取得
//最初の要素
const $c_first = $elem.children().first();
const firstChild = document.getElementById('hoge').firstElementChild;
//最後の要素
const $c_last = $elem.children().last();
const lastChild = document.getElementById('hoge').lastElementChild;
複数の要素に対する処理の仕方
jQueryだと要素が一つでも複数でもクラスの追加など処理が可能だが、ネイティブJSの場合は、要素が一つしかない場合でもループ処理は必要となる。
const elems = $('.elem'); //複数の要素を取得
//querySelectorAll() などで取得した時は、ちゃんとループさせて処理する
for (let i = 0; i < elems.length; i++) {
elems[i].classList.add('add-class');
}
下記の方法はエラーとなる
クラスを追加の例でネイティブJSでダメな例。
ちゃんとループで処理する。
//jQueryの場合は以下の方法でも大丈夫
const elem = $('#elem'); //一つの要素を取得
const elems = $('.elems'); //複数の要素を取得
//以下はどちらもOK
elem.addClass('add-class');
elems.addClass('add-class');
//ネイティブJSの場合は以下の方法が難しい
const elem = document.getElementById('elem'); //一つの要素を取得
const elems = document.querySelectorAll('.elems'); //複数の要素を取得
elem.classList.add('add-class'); //OK
elems.classList.add('add-class'); //エラー！
参考サイト
駆け足でメモしたが、以下のサイトを参考にしました。
ありがとうございます。
Discussion