素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: twitter: @javascripter にどうぞ。

document.getElementsBySelectorというライブラリを作ったので公開します。

CSSセレクタ版getElementsByTagNameみたいなものを作ったから公開します。

document.getElementsBySelector('div.day pre[class="syntax-highlight"]')みたいな感じでやると結果が配列で返ってくる関数です。JQueryの$とか、CSSQueryとかみたいなものです。

JQueryみたいにCSSセレクタを無理やりXPathなどで再現したり、CSSをパースするようなことをしてないので、かなり軽量でコンパクトです。CSSセレクタの部分はブラウザ任せなのでCSS2やCSS3も、ブラウザが実装してる範囲で対応しています。::beforeとか::first-letterとかは取得できません。
:hoverとかは取得できるけど、やる意味はないと思います。

動作確認:Firefox2,Firefox3。ほかのブラウザで動作したらコメントください。

/* document.getElementsBySelector var 0.01
 * 
 * auther:http://d.hatena.ne.jp/javascripter/
 * 使い方:document.getElementsBySelector(CSSセレクタ);と
 * するとCSSセレクタにマッチしたノードが配列形式で返ってきます。
 *
 * 更新履歴:
 * Tue Apr 15 2008 20:11:35 GMT+0900:初版作成
 */

document.getElementsBySelector=function(selector){
	//単純なケースの場合はすぐ返す
	if(selector.match(/^\w+$/)) return document.getElementsByTagName(selector);
	if(selector.match(/^#\w+$/)) return document.getElementById(selector.replace('#',''));
	if(document.getElementsByClassName&&selector.match(/^\.\w+$/)) return Array.slice(document.getElementsByClassName(selector.replace('.','')));

	var head=document.getElementsByTagName('head')[0];
	var tempStyle=document.createElement('style');
	tempStyle.setAttribute('type','text/css');
	tempStyle.textContent=selector + '{content:"_getElementsBySelector"}';
	head.appendChild(tempStyle);

	var allElements=document.getElementsByTagName('*');
	var matchedNode=new Array;
	for(var i=0;i<allElements.length;i++){
		var contentProp=getComputedStyle(allElements[i],'').content;
		if(contentProp=='"_getElementsBySelector"'){
			matchedNode.push(allElements[i]);
		}
	}
	tempStyle.parentNode.removeChild(tempStyle);

	return matchedNode;
}

ライセンスは特に決めてないけど煮たり焼いたりどうとでもしてください。


雑感:

  1. 自分が作ったものを配布したりメンテナンスしたりしてみたかった。後悔はしてない。
  2. ほかのライブラリよりスマートな実装が唯一の利点。
  3. ちょっと重いかもしれない。XPath使えばいいのかな?でもStyleの部分とかどうしようもないしなぁ・・・。
  4. Element.prototypeでは使えないらしい。