getElementById や querySelector といったメソッドを使いやすくするスクリプト『tm.dom.js』の紹介

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

前回, 『Selectors API の querySelector/querySelectorAll を使ってみよう』というエントリーを書きましたが, 今回はそれをより使いやすくするスクリプトを紹介したいと思います.

document.getElementById や document.querySelectorAll なんて長くて毎回書いてらんねぇって人に オススメのスクリプトです.

とはいってもそれぞれのメソッドをラップしただけのシンプルなスクリプトです. shorthand としてお使いください.

ちなみに今回紹介する『tm.dom.js』は今制作中のライブラリからの抜粋したものだったりします.

Sample and Download

今回制作したサンプルはこちらです.

スクリプトとサンプルはこちらからダウンロードできます.

Usage

スクリプトを読み込めば, 下記のような形で要素を取得できるようになります.

TM.$id("hoge");                     // id が hoge の要素を取得
TM.$class(foo);                     // class が foo の最少の要素を取得
TM.$class(foo, 4);                  // class が foo の要素の4番目を取得(index省略時は0番目)
TM.$classAll(foo);                  // class が foo の要素を配列として全て取得
TM.$query(".foo");                  // class が foo の最初の要素を取得
TM.$query("section>p", 2);          // section 直下の2番目の p 要素を取得(index省略時は0番目)
TM.$query("input[type='submit]");   // type が submit の要素を取得
TM.$queryAll(.foo);                 // class が foo の要素を配列として全て取得
TM.$queryAll(".foo, .bar");         // class が foo もしくは bar の要素を配列として全て取得

Code

tm.dom.js

tm.dom.js 全体のコードです.

/**
 * @author  phi
 */

var TM = TM || {};

(function(np){
    
    np = np || window;
    
    /**
     * id の一致する要素を取得.
     * document.getElementById の Alias.
     * @param   {String}    id  id.
     */
    np.$id = function(id) {
        return document.getElementById(id);
    };
    
    /**
     * class 名の一致する要素リストの index(デフォルトは0) 番目の要素を取得.
     * document.getElementsByClassName の Alias.
     * @param   {String}    className   class name.
     * @param   {Number}    index       element index.
     */
    np.$class = function(className, index) {
        return (index) ?
            document.getElementsByClassName(className)[index] :
            document.getElementsByClassName(className)[0];
    };
    
    /**
     * class 名の一致する要素リストを取得.
     * document.getElementsByClassName の Alias.
     * @param   {String}    className   class name.
     */
    np.$classAll = function(className) {
        return document.getElementsByClassName(className);
    };
        
    /**
     * css セレクタの一致する要素リストの index 番目の要素を取得.
     * document.querySelector の Alias.
     */
    np.$query = function(query, index) {
        return (index) ?
            document.querySelectorAll(query)[index] : 
            document.querySelector(query);
    };
    
    /**
     * css セレクタの一致する要素リストを取得.
     * document.querySelectorAll の Alias.
     */
    np.$queryAll = function(query) {
        return document.querySelectorAll(query);
    };
    
    /**
     * tagName 要素を生成する.
     * document.createElement の Alias.
     */
    np.$create = function(tagName)
    {
        return document.createElement(tagName);
    };
    

    /**
     * ドキュメントに書き込む.
     * document.write の Alias
     */
    np.$write = function(str) {
        document.write(str);
    };
    
})(TM);

index.html

今回制作したサンプルのコードです.

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>『tm.dom.js』 サンプル</title>
        <style>
            body {
                font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
            }
            pre {
                font-family: 10px 'Consolas', 'Monaco', 'MS ゴシック';
                margin: 5px;
                padding: 5px;
                border: 1px solid black;
            }
        </style>
        <script src="tm.dom.js"></script>
        <script>
            window.onload = function() {
                // ヘッダー取得
                var eH2 = TM.$query("h2.header");
                log("【" + eH2.innerHTML + "】");
                
                // class に blood-type がある要素ををすべて取得
                var eBloodTypeList = TM.$queryAll(".blood-type");
                var bloodTypeList = [];
                for (var i=0,len=eBloodTypeList.length; i<len; ++i) {
                    bloodTypeList.push( "'" + eBloodTypeList&#91;i&#93;.innerHTML + "'" );
                }
                log("赤血球の遺伝子に応じて" + bloodTypeList.join(",") + "に分類する方法.");
                
                // blood-type-list の子供で my class がついている要素を取得
                var eMyBloodType = TM.$query("#blood-type-list .my");
                log("ちなみに私の血液型は '" + eMyBloodType.innerHTML + "' です.");
                
                // id で取得
                var eBType = TM.$id("B-type");
                log("学生時代の友人は '" + eBType.innerHTML + "' が多かったです.");
                
                var eOType = TM.$id("O-type");
                log("職場の同僚は'" + eOType.innerHTML + "' が多いです.");
                
                var eAType = TM.$id("A-type");
                log("元恋人は'" + eAType.innerHTML + "' でした... はぁ...");
            };
            
            // ログ出力
            var log = function(str) {
                var eConsole = TM.$id("console");
                eConsole.innerHTML += str;
                eConsole.innerHTML += '\n';
            };
        </script>
    </head>
    <body>
        <h1>『tm.dom.js』 サンプル</h1>
        
        <section>
            <h2 class="header">AOB式血液型</h2>
            <ul id="blood-type-list">
                <li id="A-type" class="blood-type">A 型</li>
                <li id="B-type" class="blood-type">B 型</li>
                <li id="O-type" class="blood-type my">O 型</li>
                <li id="AB-type" class="blood-type">AB 型</li>
            </ul>
        </section>
        
        <section>
            <h2>Console</h2>
            <pre id="console"></pre>
        </section>
    </body>
</html>

次回は何書こうかなぁ~

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT