JavaScript_javascript スキルで要素を取得する一般的な方法の概要

要素を取得するには、要素 ID、タグ名、クラス名という 3 つの一般的な方法があります。

getElementById

DOM は、id 属性に対応するノード オブジェクトを返す getElementById というメソッドを提供します。使用する際は大文字と小文字の区別に注意してください。

ドキュメントオブジェクト固有の関数であり、このメソッドはドキュメントオブジェクトを通じてのみ呼び出すことができます。使用方法は以下の通りです。

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

document.getElementById('demo') //デモは要素
に対応するIDです

この方法は、IE6 を含む主流のブラウザと互換性があり、大胆に使用できます。

getElementsByTagName

このメソッドはオブジェクトの配列 (正確には HTMLCollection ですが、本当の意味では配列ではありません) を返します。各オブジェクトはドキュメント内の指定されたタグを持つ要素に対応します。 getElementById と同様に、このメソッドはパラメーターを 1 つだけ提供し、そのパラメーターは指定されたタグの名前です。サンプル コードは次のとおりです。

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

document.getElementsByTagname('li') //li はタグの名前です

このメソッドは、ドキュメント オブジェクトから呼び出すだけでなく、通常の要素からも呼び出すことができることに注意してください。例は次のとおりです:

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

var デモ = document.getElementById('demo');
var lis = デモ.getElementsByTagname('li');

同様に、この方法は主流のブラウザ (IE6 であっても) と互換性があり、大胆に使用できます。

getElementsByClassName

DOM では、タグを指定して要素を取得するだけでなく、指定したクラス名の要素を取得する getElementsByClassName メソッドも提供します。ただし、この方法は比較的新しいため、IE6 などの古いブラウザではまだサポートされていません。ただし、ハックを使用して古いブラウザの欠点を補うことはできます。このメソッドは次のように呼び出されます:

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

document.getElementsByClassName('demo') //demo は要素

に指定されたクラス名です

getElementsByTagname と同様に、このメソッドはドキュメント オブジェクトに加えて通常の要素からも呼び出すことができます。

IE6 や 7 などの古いブラウザの場合は、次のハックを使用できます:

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

function getElementsByClassName(ノード,クラス名){

If(node.getElementsByClassName) {
return node.getElementsByClassName(クラス名);
}else {
var results = [];
var elems = node.getElementsByTagName("*");
for(var i = 0; i If(elems[i].className.indexOf(クラス名) != -1){
results[results.length] = elems[i];
}
}
結果を返します;
}
}

展開

上記の要素選択メソッドに満足するだけでなく、JQuery などのセレクターを通じて要素を取得したい場合は、実装メソッドは上記の getElementsByClassName と似ています。興味がある場合は、セレクターのセットを自分で実装できます。 。しかし、結局のところ、上記の 3 つの方法とイベント バブリングを組み合わせるだけで十分だと思います。

以上がこの記事の全内容です。皆様のお役に立てれば幸いです。