一般的な生の JS セレクターの使用法まとめ_JavaScript スキル

共通の getElementById、getElementsByName、getElementsByTagName。しかし、外国人はこれらの API に満足できなかったため、getElementsByClassName を考案しました。ここでは、オリジナルの js 選択についてのみ説明します。

1.getElementById

これは最も一般的に使用されるセレクターであり、ID によって見つかります:

例:

var test=document.getElementById(" test ").value;//ドキュメント内の id test を持つ要素の値を取得し、それを変更するテスト面に割り当てます

2.getElementsByName

例:

var test= document.getElementByName("test");//ドキュメント内のtestという名前の要素のノードを取得し、テスト変数に代入します。このとき、テスト変数は配列

3です。 getElementsByTagName

例:

var test=document.getElementsByTagName("test");//ドキュメント内のクラスtestを持つ要素のノードを取得し、testに代入します。 、テスト変数は配列であり、このセレクターは IE5、6、7、8 では使用できません

4.getElementsByClassName

このセレクターは js API で見つかりません。これを使用したい場合は、自分でメソッドを定義する必要があります。通常の原則として、まず getElementsByTagName("*") を使用してドキュメント内のすべての要素を取得し、次に正規表現を使用して一致する要素を見つけ、それらを配列に入れます。それらを返してください。インターネット上には、このセレクターを実装した多くのプログラマーがいます。次に、2 つの例を示します。

(1) Robert Nyman によって作成された Ultimate getElementsByClassName スキームは、2005 年に実装されました。外国人はかなり前に実装されていますが、非常に遠いです。

コードをコピー コードは次のとおりです:

//3 つのパラメーターはすべて必須です。 Web ページにはクラス名「cell」を持つ要素が 5007 個あり、IE8 は 1828 ～ 1844 ミリ秒、
//IE6 は 4610 ～ 6109 ミリ秒、FF3.5 は 46 ～ 48 ミリ秒、opera10 は 31 ～ 32 ミリ秒です。
//safari4 は 19 ～ 20 ミリ秒
function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.すべて)? oElm.all :
oElm.getElementsByTagName(strTagName);
strClassName = strClassName.replace(/-/g, "\-"); >var oRegExp = new RegExp("(^|\s)" strClassName "(\s|$)");
var
for(var i=0; i oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return ( arrReturnElements)
}


(2) Dustin Diaz (『JavaScript Design Patterns』の著者) によって提供されますが、互換性は上記ほど良くなく、IE5 をサポートしていません。

コードをコピー コードは次のとおりです:

//最後の 2 つのパラメーターは信頼できます。 Web ページを見つける クラス名「cell」を持つ要素は 5007 個あります。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 =ドキュメント;
if ( tag == null )
tag = '*';
var elsLen = els.length; new RegExp(" (^|\s)" searchClass "(\s|$)");
for (i = 0, j = 0; i
if ( pattern. test(els[ i].className) ) {
classElements[j] =
j ;
}
}
return classElements;

------------------------------------------ ---------------------------------------------------- ---------------------------------------------------- ---- ----

注: これは現在の要素のノードを表すことができます。

------------------------------------------ ------ -------------------------------------------- ------ -------------------------------------------- ------ --------

イベントなどのナレッジ ポイントを照合するためによく使用されるメソッドを次に示します。




コードをコピーします

コードは次のとおりです:

//id test でフォームを送信します

document.getElementById("test").submit();

//id test で要素の境界線を設定します2 ピクセルまで、実線、赤

document.getElementById("test").style.border="2px 実線赤"

//マウスは要素の外に移動または移動します。 ID テスト、背景色を変更します

function test(){
document.getElementById("test").onmouseover=function(){document.getElementById("test2").style.backgroundColor=" red"} ;
document.getElementById("test").onmouseout=function(){document.getElementById("test2").style.backgroundColor="blue"};
}

//ポップアップ ドキュメント内の test という名前の要素の数

function test()
{
var test=document.getElementsByName("test")
alert(test) .length);
}