Blog Entry  (Jan. 31, 2016, 4:01 a.m.)

Tilo Mitra's avatar

[小ネタ]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') のようにセレクトできるように $ という関数を用意して中で正規表現を使うように実装するのか、素直にセレクタの扱いに優れたライブラリを利用したほうが楽かもしれないですね。

元の記事へ