Help us understand the problem. What is going on with this article?

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

jQueryはもうダメだ、jQuery万歳!

単数選択

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

document.querySelector()とまったく同じ

複数選択

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

セレクタの先頭に*を付けると複数選択。
document.querySelectorAll()と同じ処理になるが、戻り値が配列なのが新しい

HTMLCollectionが返ってきて嬉しかったことが一度もないので、戻り値は配列にしました。

要素を1つ作成

要素を1つ作成
$('<p>', '本文' {'属性名': '属性値'}) // 戻り値はDOM要素

// const el = document.createElement('p')
// el.textContent = '本文'
// el.setAttribute('属性名', '属性値')
// と同じ

第1引数に開始タグを渡すと、その要素を作成します。
第2引数には本文の文字列、第3引数には属性をオブジェクトで渡すこともできます。(任意)

戻り値はDOM要素です。

HTML文字列のDOM化

HTML文字列のDOM化
$('HTML文字列') // 戻り値はDocumentFragment

HTML文字列を渡すと、その文字列をDOM化します。
戻り値はDocumentFragmentなので、append()などに渡して挿入してください

ソースコード

関数1つです。
あえてIEには対応してない

function $(selector, text = '', attr = {}){
    if(selector.includes('<')){
        if(selector.match(/^<[\w\-]+>$/)){
            const tagName = selector.slice(1, -1);
            const el = document.createElement(tagName);
            el.textContent = text;
            for(let k in attr){
                el.setAttribute(k, attr[k]);
            }
            return el;
        }
        else{
            const template = document.createElement('template');
            template.innerHTML = selector;
            return template.content;
        }
    }
    else if(selector.startsWith('*')){
        if(selector.length > 1){
            selector = selector.slice(1);
        }
        return Array.from(document.querySelectorAll(selector));
    }
    return document.querySelector(selector);
}
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away