🐙

jQueryネからVanilla JSへの書き換え方まとめ

2022/08/28に公開

JavaScript

vanilla

tech

概要

今だに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');  //エラー！

参考サイト

駆け足でメモしたが、以下のサイトを参考にしました。
ありがとうございます。

https://wemo.tech/2101