nocblog

jQueryは便利だけど、わざわざjQueryをロードせずともできるだけ同じようなことがしたいというときに便利。jQueryほどセレクタの指定ができないが、forEachでぐるぐると実行してくれるので便利。おまけにテストも書いてみました。 使う場面としたら、Chrome拡張やブックマークレットくらいでしょうか。

<script>


/* スクリプト
-------------------------------------------------------------------------------*/
var tags, classes, id;
(function(){
    var a = function(o){return Array.prototype.slice.apply(o)},
    d = document,
    g = function(t){return d.getElementsByTagName(t)};
 
    tags = function(t, f, h) {
        var c = 0;
        a((h == undefined ? g(t) : h.getElementsByTagName(t))).forEach(function(h) {
            f.call(h, c);
            c++;
        });
    };
 
 
    classes = function(l, f, h) {
        var o = 0;
        a((h == undefined ? g("*") : h.getElementsByTagName("*"))).forEach(function(h) {
            var c = h.className.split(" ");
            for (var i = 0; i < c.length; i++) {
                if (c[i] == l) {
                    f.call(h, o);
                    o++;
                    break;
                }
            };
        });
    };
 
    id = function(i, f) {
        f.call(d.getElementById(i));
    };
}).call(this);



/* テストスクリプト
-------------------------------------------------------------------------------*/

var testResult = "";
var print = function(_print) {
    testResult += _print;
};

var testData = function() {
    document.write(new Array(100).join("-")+"<br/>");
    document.write("テストデータ<br/>");
    document.write(new Array(100).join("-")+"<br/><br/>");
};



var testLog = function(){
    document.write("<br/><br/>");
    document.write(new Array(100).join("-")+"<br/>");
    document.write("テスト結果<br/>");
    document.write(new Array(100).join("-")+"<br/>");
    document.write(testResult);
};


var suite = function(_suite) {
    print("<br/>■ "+_suite+"<br/>");
};

var test = function(_name){

    var result = 1;
    for (var i = 1; i < arguments.length; i++) {
        if (typeof(arguments[i]) == "function") {
            try {
                result = result && arguments[i]();    
            }
            catch (_error) {
                result = 0;
                throw (_error);
            }
            break;
        }
    };

    print((result ? "○" : "×")+" ");
    print(_name);
    print("<br/>");
};


testData();
</script>


<!-- テスト用データ
=============================================================================== -->
<meta charset="UTF-8">
<div>hoge</div>
<div class="hoge">hoge</div>
<div>hoge</div>
<div id="fufu">hoge</div>
<div class="hage hoge test">
    <span>aaa</span>
    <span>aaa</span>
    <span>aaa</span>
    <span>aaa</span>
</div>
<div class="test">
    <span>bbb</span>
    <span>bbb</span>
    <span>bbb</span>
    <span class="test">bbb</span>
    <span class="test">bbb</span>
    <span>bbb</span>
    <span>bbb</span>
</div>


<script>

/* テスト実行
-------------------------------------------------------------------------------*/

suite("tags");

test("ちゃんとtagsが実行された", function(){
    var count = 0;
    tags("div", function(){
        count++;
    });
    return count == 6;
});

test("インデックスが一致している", function(){
    var count = 0;
    var flag = 1;
    tags("div", function(i){
        count++;
        if (count == i) {
            flag = 0;
        }
    });
    return flag;
});

test("二階層目のspanを取得できる", function(){
    var count = 0;
    tags("div", function(i){
        if (i == 5) {
            tags("span", function() {
                count++;
            }, this);
        }
    });
    return count == 7;
});

suite("classes");

test("classesが実行できた", function(){
    var count = 0;
    classes("hoge", function(){
        count++;
    });
    return count == 2;
});

test("インデックスが一致している", function(){
    var count = 0;
    var flag = 1;
    classes("hoge", function(i){
        count++;
        if (count == i) {
            flag = 0;
        }
    });
    return flag;
});

test("カウンタが数値である", function(){
    var flag = 1;
    classes("hoge", function(i){
        if (typeof(i) != "number") {
            flag = 0;
        }
    });
    return flag;
});

test("二階層目のclassを取得できている", function(){
    var count = 0;
    classes("test", function(i){
        if (i == 1) {
            console.log(this);
            classes("test", function() {
                console.log(this);
                count++;
            }, this);
        }
    });
    return count == 2;
});

suite("id");

test("idが実行できた", function(){
    var count = 0;
    id("fufu", function(){
        count++;
    });
    return count == 1;
});

/* テスト結果出力
-------------------------------------------------------------------------------*/
testLog();

</script>

Code language: JavaScript (javascript)

例

こんなかんじでブックマークレットも作れる

var tags,classes,id;(function(){var a=function(o){return Array.prototype.slice.apply(o)},d=document,g=function(t){return d.getElementsByTagName(t)};tags=function(t,f,h){var c=0;a(h==undefined?g(t):h.getElementsByTagName(t)).forEach(function(h){f.call(h,c);c++})};classes=function(l,f,h){var o=0;a(h==undefined?g("*"):h.getElementsByTagName("*")).forEach(function(h){var c=h.className.split(" ");for(var i=0;i<c.length;i++)if(c[i]==l){f.call(h,o);o++;break}})};id=function(i,f){f.call(d.getElementById(i))}}).call(this);
tags("td",function(){var that=this;tags("a",function(){if(this.innerHTML.indexOf("\\u4ed9\\u53f0")+1)that.style.background="orange"},this)});Code language: JavaScript (javascript)