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

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

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

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

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

main.js

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

//2024.01.13追加
//document.getElementById("fuga")
const fuga = getElements("#fuga");
//document.getElementsByClassName("hoge")
const hoge = getElements(".hoge");

//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);
}

//querySelectorのように使える
export function getElements(str) {
  if(typeof str != "string") return;
  const len = str.length;
  if(str.charAt(0) === "#") {
    const ID = str.slice(1, len);
    return document.getElementById(ID);
  }
  if(str.charAt(0) === ".") {
    const CLASS = str.slice(1, len);
    return document.getElementsByClassName(CLASS);
  }
}