ホームページ > 記事 > ウェブフロントエンド > JavaScript でクラス名で要素を選択するにはどうすればよいですか?
クラス名で要素を取得する方法
JavaScript では、document.getElementById() メソッドを使用すると、ID で要素を簡単に取得できます。ただし、クラスによる要素の取得は少し異なり、最初は混乱を引き起こす可能性があります。
クラスによる要素の選択の正しいメソッド名は document.getElementsByClassName() です。これは、Web ページ上の複数の要素が同じクラスを共有できるため、NodeList または配列のようなオブジェクトを返す 'Elements' が使用されるためです。
次に例を示します:
<code class="javascript">var elementsByClass = document.getElementsByClassName('class_name'); console.log(elementsByClass[0]); // Accesses the first element with the provided class name</code>
NodeList を実際の配列に変換する必要がある場合は、次のメソッドを使用できます。
<code class="javascript">var arrayFromList1 = Array.prototype.slice.call(elementsByClass); // Alternatively, you can use the following syntax to convert the NodeList to an array var arrayFromList2 = [].slice.call(elementsByClass);</code>
クラスごとに要素を選択するには、querySelector() または querySelectorAll() を使用するのが一般的であることに注意してください。クロスブラウザーのサポートが強化されているため、推奨されます。
最後に、正確で最新の JavaScript 情報については、MDN などの信頼できるソースを参照することをお勧めします。
以上がJavaScript でクラス名で要素を選択するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。