📝

JSでよく使ういつものおまじないを関数化してみる

2023/01/05に公開約2,700字

JSでよく使うquerySelectorやclass系を関数化してみた

DOMは最初変数に格納後にゴニョゴニョするので、あまり使う機会はないかもしれないけど、一度定義し覚えてしまえば記述量は減るのでこういった方法もありかも。
見た目はjQueryに近いですね。

document.~って書くのが最初は長いなって思ってたのが普通な感覚になってきたので、自分も実際使うかどうか分かりませんが。。。

elにはクラス名".hoge"、DOMを引数として渡してください。
gebClassgebIdはgetElement(s)系なので、"hoge"のようにピリオドは要りません

main.js
'use strict';
const { log } = console;
import { qs, qsAll, gebClass, gebId, addClass, removeClass, hasClass } from './scripts/general';

//document.querySelector(".hoge")
qs(".hoge");

//document.querySelectorAll(".hoge")
qsAll(".hoge");

//document.getElementsByClassName("hoge")
gebClass("hoge");

//document.getElementById("hogeId")
gebId("hogeId");

//document.querySelector(".hoge").classList.add("fuga")
addClass(".hoge", "fuga");

//hoge.classList.remove("fuga")
const hoge = qs(".hoge")
removeClass(hoge, "hige");

//true or false
hasClass(".hoge", "test");


const hoges = qsAll(".hoges");

//hoges.querySelector(".piyo")
qs(".piyo", hoge);

//hogehogeクラスがある場合
hoges.forEach(el => {
  if(hasClass(el, "hogehoge")) { //true
    log("has class");
  }
});

//HTMLParagraphElement or HTMLCollection
const testAry = gebClass("testdayo");

//HTMLCollectionが複数ある場合にそれぞれ取り出す
if(testAry.length > 1) {
  [...testAry].forEach(el => log(el));
}

//nyaa.getElementsByClassName("wanwan")
const nyaa = gebClass("nyaa");
log(gebClass("wanwan", nyaa))
general.js
'use strict';
const { log } = console;

//querySelector
export function qs(el, scope = document) {
  if(!el) return;
  if(typeof el != "string") return el;
  return scope.querySelector(el);
}

//querySelectorAll
export function qsAll(el, scope = document) {
  if(!el) return;
  if(typeof el != "string") return el;
  return scope.querySelectorAll(el);
}

//getElementsByClassName
export function gebClass(el, scope = document) {
  if(typeof el != "string") return;
  const collection = scope.getElementsByClassName(el);

  //要素が複数ならHTMLCollection
  if(collection.length > 1) {
    return collection;
  } else {
    return collection[0];
  }
}

//getElementById
export function gebId(id) {
  if(typeof id != "string") return;
  return document.getElementById(id);
}

//クラス付与
export function addClass(el, className) {
  if(!el) return;
  if(typeof el == "string") el = document.querySelector(el);
  el.classList.add(className);
}

//クラス削除
export function removeClass(el, className) {
  if(!el | !hasClass(el, className)) return;
  if(typeof el == "string") el = document.querySelector(el);
  el.classList.remove(className);
}

//クラスを持っているか否かをbooleanで返す
export function hasClass(el, className) {
  if(!el) return;
  if(typeof el == "string") el = document.querySelector(el);
  return el.classList.contains(className);
}

Discussion

ログインするとコメントできます