Common getElementByid、getElementsByname、getElementsBytagname。しかし、外国人はこれらのAPIに満足していなかったため、彼らはgetelementsbyclassnameを作成し、後にjQueryセレクターが少しずつ登場し、元のJS選択のみがここで言及されています。
1.GetElementByID
これは最も一般的に使用されるセレクターであり、IDによって配置されます。
例：
var test = document.getElementById（ "test"）。値; //ドキュメントでIDテストで要素の値を取得し、テストフェイスの変更に値を割り当てます
2.GetElementsByName
例：
var test = document.getElementByName（ "TEST"）;
3.GetElementsByTagname
例：
var test = document.getElementsByTagname（ "Test"）; 、7、8は利用できません
4.GetElementsByClassName
このセレクターは、JS APIを使用することはできません。通常の原則は、最初にgetelementsbytagnameを使用して、ドキュメント内のすべての要素を取得し、次に測定する必要があります。正規表現を使用して、一致する要素が配列で返されることを見つけます。このセレクターを実装する多くのプログラマーがインターネット上にあり、次の例が2つの例です。
（1）Robert Nymanが作成したUltimate GetElementsByClassNameソリューションは、2005年に実装されました。
コードコピーは次のとおりです。
// 3つのパラメーターが必要です。IE8は1828年から1844年のミリ秒に続きます。
// IE6は4610〜6109ミリ秒、ff3.5は46〜48ミリ秒、オペラ10は31〜32ミリ秒、クロムは23〜26ミリ秒、
// safari4は19〜20ミリ秒です
function getelementsbyclassname（oelm、strtagname、strclassname）{
var arrements =（strtagname == "*" && 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」の著者によって提供されますが、互換性は上記ほど良くなく、IE5をサポートしていません。
コードコピーは次のとおりです。
//最後の2つのパラメーターは、Webページで「Cell」を持つ5007の要素を見つけます。
//ff3.5は42〜48ms、Opera10は31ms、Chromeは22〜25ms、Safari4は18〜19msです
var getElementsByClass = function（searchclass、node、tag）{
var classelements = new Array（）;
if（node == null）
node = document;
if（tag == null）
tag = '*';
var els = node.getElementsByTagname（タグ）;
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 ++;
}
}
classelementsを返します。
}
--------------------------------------------------------------- --------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------- --------------------------------------------------------------- ------ -------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------- ----------------------------------------------
注：これは、現在の要素のノードを表すことができます。
--------------------------------------------------------------- --------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------- --------------------------------------------------------------- ------ -------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------- ----------------------------------------------
イベントなどの知識ポイントを使用するための一般的に使用される方法は次のとおりです。
コードコピーは次のとおりです。
// IDテスト付きフォームを送信します
document.getElementById（ "test"）。submit（）;
//テスト要素としてIDで境界を2ピクセル、固体、赤に設定します
document.getElementById（ "test"）。style.border = "2px solid red";
// 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"};
}
//名前テスト付きポップアップドキュメント内の要素の数
function test（）
{
var test = document.getElementsbyname（ "test"）;
アラート（test.length）;
}