Vanilla派だからjQueryは使わないがjQueryみたく書きたい

普段はプログラムを工夫することでDOM操作を最小限にしているが、それでもquerySelector()やcreateElement()を使わざるを得ない場面がある。それを短く書けるようにしたいという話。

jQueryを使うまでもないが、jQueryの$関数みたいに短く書きたいのです。

単数選択

document.querySelector()と同じ

単数選択

$('セレクタ') // 戻り値はDOM要素

複数選択

セレクタの頭に*を付けると複数選択。document.querySelectorAll()と同じ

複数選択

$('*セレクタ') // 戻り値は配列

※NodeListが返ってきて嬉しかったことがないので、戻り値は配列にした。

HTML文字列のDOM化

この関数はタグ付きテンプレートリテラルとして使うと、その文字列をDOM化します。

HTML文字列のDOM化

$`HTML文字列` // 戻り値はDOM要素

戻り値はDOM要素。
トップレベルに複数の要素がある場合はDocumentFragmentとなります。

ソースコード

ご自由にお使いください。

function $(selector, ...vars){
    if(Array.isArray(selector)){
        const template     = document.createElement('template')
        template.innerHTML = selector[0] + vars.map((v,i) => v + selector[i+1]).join('')
        const content      = template.content
        return content.childNodes.length === 1 ? content.firstChild : content
    }
    else if(selector.startsWith('*')){
        return Array.from(document.querySelectorAll(selector.slice(1) || '*'))
    }
    else{
        return document.querySelector(selector)
    }
}