オブジェクトと配列新しい配列メソッド jQueryの簡易な再現、documentオブジェクト、querySelectorAllメソッド

入門JavaScriptプログラミング
 楽天ブックス
Yahoo!ショッピング
au PAY マーケット

開発環境

入門JavaScriptプログラミング (JD Isaacks(著)、株式会社クイープ(監修、翻訳)、翔泳社)のUNIT2(オブジェクトと配列)、LESSON 9(新しい配列メソッド)、9.7(練習問題)、Q9-1の解答を求めてみる。

HTML

<p class="test">段落</p>
<ul class="test">
    <li>項目</li>
</ul>
<div class="test">
    ブロック
</div>
<script src="./sample1.js"></script>

コード

// 万が一名前が衝突しないように、$ではなく$testに
function $test(query) {
    console.log('hit');
    return {
        css: function (p, v) {
            Array.from(document.querySelectorAll(query))
                .forEach(
                    function (node) {
                        node.style[p] = v;
                    }
                )
            return this;
        }
    };
}

$test('.test')
    .css('background', 'yellow')
    .css('font-weight', 'bold');