[小ネタ]JavaScriptでgetElementsByClassNameを書くのが面倒なので$clsにする

小ネタです。ご容赦ください。

大規模なJavaScriptであればjQueryやAngularJS・React.jsなどを使うと思いますが、簡単なページやちょっとしたテストで外部のライブラリを使うまでもない場合、DOM操作をするときは直接getElementsByClassNameやgetElementsByTagNameなどと書くことになり、面倒です。

とにかくgetElementsByClassNameが長い

<div class='class1'>
    <div class='class2'>
        A
    </div>
</div>

例えばこのようなHTMLに対するDOM操作は、素のJavaScriptではコードが長くなってしまいがちです。

document.getElementsByClassName('class1')[0].getElementsByClassName('class2')[0];

また、次のような間違いをしてしまってイラっとくるときがあります。

• getElementByClassName
• getElementsByClassname

$clsと置き換えてみる

jQueryで$('.class1')という記法がとても羨ましくなります。なので数行のコードを追加してこれを$clsに置き換えてみます。

var $cls = function (className) {
    var context = this == window ? document: this;
    return context.getElementsByClassName(className);
};

HTMLElement.prototype.$cls = $cls;

先ほどのコードは次のように書けるようになりました。

$cls('class1')[0].$cls('class2')[0];

アンチパターン？

HTMLElement.prototype.$cls = $cls;のように書くのはアンチパターンかもしれないですね。

複雑なDOMには正規表現かライブラリで

本当に小さなコードを書くときはこれで十分ですが、getElementByIdやgetElementsByTagNameなども使いたくなったらjQueryを真似て$('#id')のようにセレクトできるように$という関数を用意して中で正規表現を使うように実装するのか、素直にセレクタの扱いに優れたライブラリを利用したほうが楽かもしれないですね。