一般的なオリジナルJSセレクタの使い方をまとめました。


一般的なgetElementById、getElementsByName、getElements ByTagName。しかし、外国人はこれらのAPIに満足していないので、getElements ByClass Nameを作りました。その後、少しずつjQueryセレクタが現れました。ここでは元のjsの選択だけを言います。1.getElementByIdこれは最も一般的なセレクタであり、IDによって位置付けされる:例:var test=document.getElementById(「test」).value;/ドキュメント中のidがtestの要素の値を取得し、testの変顔2.getElements ByNameに値を与えた例:var test=document.getElementByName(「test」);ドキュメント内のnameがtestの要素であるノードを取得し、test変数に値を割り当てます。この時、test変数は配列3.getElements ByTagNameの例です。var test=document.getElements ByTagName("test");ドキュメントのclassがtestの要素であるノードを取得してtestに値を割り当てます。このときtest変数は配列です。このセレクタはIE 5、6、7、8の中で4.getElements ByClass Nameを使用できません。このセレクタはjsのAPIの中で見つけられません。自分で方法を定義しなければならないです。その後、巡回して、正規表現を使ってマッチする要素を見つけて、行列に入れて返します。オンラインでは多くのプログラマがこのセレクタを実現しています。(1)The Ultimate getElements ByClass Name案は、作者はRobert Nymanで、05年に実現しました。外国人の多くは昔から遠く離れています。
 
// , 5007 “cell” ,IE8 1828 ~ 1844 ,
//IE6 4610 ~ 6109 ,FF3.5 46 ~ 48 ,opera10 31 ~ 32 ,Chrome 23~ 26 ,
//safari4 19 ~ 20
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i < arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
}
(2)はDustin Diaz(「JavaScript Design Patterns」の著者)によって提供されますが、互換性は上記に及ばず、IE 5はサポートされていません。
 
// , 5007 “cell” ,IE8 78 ,IE6 125~171
//FF3.5 42 ~ 48 ,opera10 31 ,Chrome 22~ 25 ,safari4 18 ~ 19
var getElementsByClass = function(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------以下は事件などの知識点に合わせて、よく使われる使い方です。