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)