document.getElementsByClassNameのクロスブラウザ化

Category

JavaScript/Ajax

投稿日

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

Post Your Comment

コメント投稿フォーム