要素を取得するには、3つの一般的な方法があります。つまり、要素IDを介した名前、クラスを通じてタグと名前を介して名前を介して名前を付けます。
GetElementByID
DOMは、getElementByIDと呼ばれるメソッドを提供します。これは、対応するID属性を持つノードオブジェクトを返します。使用するときは、ケースに敏感になるように注意してください。
これは、ドキュメントオブジェクトに固有の関数であり、それを通してのみ呼び出すことができます。使用される方法は次のとおりです。
コードコピーは次のとおりです。
document.getElementById( 'demo')//デモは、要素に対応するIDです
この方法は、IE6+を含む主流のブラウザと互換性があり、大胆に使用できます。
GetElementsByTagname
このメソッドは、オブジェクトの配列を返します(正確には、htmlcollectionコレクション、真の配列ではありません)。各オブジェクトは、ドキュメントに特定のタグを持つ要素に対応します。 getElementByIDと同様に、このメソッドは1つのパラメーターのみを提供し、そのパラメーターは指定されたタグの名前です。例コードは次のとおりです。
コードコピーは次のとおりです。
document.getElementsByTagname( 'li')// liはタグの名前です
ドキュメントオブジェクトによって呼び出されることに加えて、この方法は通常の要素によっても呼ばれることに注意する必要があります。例は次のとおりです。
コードコピーは次のとおりです。
var demo = document.getElementById( 'demo');
var lis = demo.getelementsbytagname( 'li');
同様に、この方法は、IE6+を含む場合でも、主流のブラウザと互換性があり、大胆に使用できます。
GetElementsByClassName
タグを指定して要素を取得することに加えて、DOMは、指定されたクラス名で要素を取得するためにGetElementsByClassNameメソッドも提供します。ただし、この方法は比較的新しいため、IE6などの古いブラウザはサポートしていません。ただし、ハックを介して古いブラウザの欠点を補うことができます。この方法は次のように呼び出されます。
コードコピーは次のとおりです。
document.getElementsByClassName( 'Demo')//デモで指定されたクラス名はです
getElementsByTagnameのように、この方法は、ドキュメントオブジェクトによって呼び出されることに加えて、通常の要素によって呼び出すことができます。
IE6や7などの古いブラウザの場合、次のハックを使用して実装できます。
コードコピーは次のとおりです。
function getElementsByClassName(node、className){
if(node.getElementsByClassName){
node.getElementsByClassName(className);
}それ以外 {
var results = [];
var elems = node.getElementsByTagname( "*");
for(var i = 0; i <elems.length; i ++){
if(elems [i] .classname.indexof(classname)!= -1){
結果[results.length] = elems [i];
}
}
結果を返します。
}
}
拡大する
上記の要素選択方法に満足しているだけでなく、jQueryなどのセレクターを介して要素を取得する必要があります。実装方法は、上記のgetelementsByclassNameに似ています。興味がある場合は、セレクターのセットを実装できます。ただし、イベントのバブルと組み合わされた上記の3つの方法は十分であると思いますが、結局のところ、これらの3つのパフォーマンスは優れていると思います。
上記はこの記事の全体的な内容であり、誰にとっても役立つことを願っています。