document.getElementsByClassNameのクロスブラウザ化
- Category
- 投稿日
2008/08/08 - 21:04
- ブックマーク
今までライブラリを使わない場合、自前でgetElementsByClassName()を用意して使っていたんですが、FireFox3やOpera9.5やSafari3はdocument.getElementsByClassNameをネイティヴに実装してるんで、ネイティヴに実装しているブラウザにはネイティヴのメソッドを使用するように作り変えました。
コードは下記みたいな感じ。
var getElementsByClassName = (function(){
if(document.getElementsByClassName){
return function(className, pElement){
return (pElement||document).getElementsByClassName(className);
};
}else{
return function(className, pElement){
var d = document, nodes = [], item;
var cls, items = (pElement || d).getElementsByTagName("*");
for(var i = 0, l = items.length; i < l; i++){
item = items[i];
if(item.className){
cls = item.className.split(/\s+/);
for(var k = 0, kl = cls.length; k < kl; k++){
if(cls[k]==className){
nodes[nodes.length] = item; break;
}
}
}
}
return nodes.length > 0 ? nodes : null;
};
}
})();
今までこのBlogで公開したやつも直しておきました。ただ、実はちょっと仕様どおりのものではなかったり。引数に'tagName'も入れよっかなーとか思ったんですけど、めんどくさくなtt(ry
ちなみに主なブラウザのgetElementsByClassName()の実装状況は下記みたいな感じ。
- 実装してる派
- Firefox3
- Opera9.5
- Safari3
- 実装してない派
- IE6
- IE7
- Firefox2
- Opera9.25
- Safari2
IEは滅ぶべき!IE8も確かダメぽと聞きました。さすがIE!
- This Entry's Tag
- javascript,tips
Trackback URI
http://mk-t-lab.com/mt/mt-tb.cgi/17

