JavaScript
jQuery
class
es6

《JavaScript》jQueryみたいなセレクターでDOMを取得するES6なクラス

jQueryなしのプロジェクトで、document.getElementById()document.getElementsByClassName() を省略するためのヘルパーはいろいろ知恵がありますが、自分でも使いやすいものを作ってみました。

$(element) のようなものをclass構文で書きます。

DOMの取得をjQueryみたいにシンプルな記述にしたい

セレクタにシンボルを付与して、その文字列からメソッドを振り分けるようにしています。

毎回 new を記述するのを避けてシンプルにするため、ラップして隠蔽できるようにしました。

/**
 * # / . / * を含むセレクタを受け取ってDOMを返す
 * # : getElementById
 * . : getElementsByClassName
 * * : querySelectorAll
 */
const Selector = class {

  /**
   *
   * @param selector
   * @returns {*[]}
   */
  constructor(selector) {

    this.selector = selector;
    return this._getEl();

  }

  /**
   * セレクタを判別してDOMを取得
   * @returns {[*]}
   * @private
   */
  _getEl() {

    const method = this._selectMethod();

    const el = document[method](this.selector.slice(1));

    return !el.length ? el : [...el];

  }

  _selectMethod() {

    const matches = {
      '#': 'getElementById',
      '.': 'getElementsByClassName',
      '*': 'querySelectorAll'
    }[this.selector[0]];

    return matches;

  }

};


/**
 * new を省略するためのラッパー
 * 好きな関数名を与える
 */
const _$ = target => new Selector(target);


/**
 * こんな感じで使う
 */
console.log(_$('#el'));

console.log(_$('.el'));
console.log(_$('*[data-el]'));
console.log(_$('*p'));

console.log(_$('*#el2 p'));

これで、 _$('#yourSelector') _$('.yourSelector') _$('*yourSelector') でDOMを取得できるようになりました。

forEachを使えるように

取得したDOMは、これも取り回しやすくするために、[...el] の部分で配列に展開して、forEach() にチェインできるようにしました。

_$('*p').forEach((el) => {

  el.style.color = '#22aacc';

});

クラスをimportできるようにする

このヘルパークラスを selector.js として main.js に import できるように手を加えてみます。

selector.js
const Selector = (() => {

  class Selector  {

    constructor(selector) {

      this.selector = selector;
      return this._getEl();

    }

    _getEl() {

      const method = this._selectMethod();

      const el = document[method](this.selector.slice(1));

      return !el.length ? el : [...el];

    }

    _selectMethod() {

      const matches = {
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '*': 'querySelectorAll'
      }[this.selector[0]];

      return matches;

    }

  }

  const omitNew = (target) => new Selector(target);

  return omitNew;

})();

export default Selector;

main.js
import _$ from './utility/selector';

console.log(_$('#el'));
console.log(_$('.el'));

参考