概要: このチュートリアルでは、`getElementsByClassName()` メソッドを使用して、クラス名で要素を選択する方法を学習します。
getElementsByClassName() メソッドの紹介
`getElementsByClassName()` メソッドは、指定されたクラス名を持つ子要素の、配列のようなオブジェクトを返します。
`getElementsByClassName()` メソッドの構文は次のとおりです。
getElementsByClassName(names)この構文では、
- `names` パラメータは、一致させる1つ以上のクラス名を表します。複数のクラス名はスペースで区切ります。
クラス名を持つ要素が見つからない場合、メソッドは `undefined` を返します。
`getElementsByClassName()` メソッドは、`document` 要素とその他のDOM要素の両方で使用できることに注意してください。
`document` 要素に対して `getElementsByClassName()` メソッドを呼び出すと、ドキュメント全体が検索され、一致する要素が返されます。
let elements = document.getElementsByClassName(names);Code language: JavaScript (javascript)ただし、特定の要素に対して `getElementsByClassName()` メソッドを呼び出すと、指定されたクラス名を持つ、その特定の要素の子孫が返されます。
let elements = rootElement.getElementsByClassName(names);Code language: JavaScript (javascript)このメソッドは、一致する要素のライブ `HTMLCollection` である `elements` を返します。
JavaScript getElementsByClassName() メソッドの例
`getElementsByClassName()` メソッドの使用例を見てみましょう。
次のHTMLドキュメントがあるとします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript getElementsByClassName</title>
</head>
<body>
<header>
<nav>
<ul id="menu">
<li class="item">HTML</li>
<li class="item">CSS</li>
<li class="item highlight">JavaScript</li>
<li class="item">TypeScript</li>
</ul>
</nav>
<h1>getElementsByClassName Demo</h1>
</header>
<section>
<article>
<h2 class="secondary">Example 1</h2>
</article>
<article>
<h2 class="secondary">Example 2</h2>
</article>
</section>
</body>
</html>Code language: HTML, XML (xml)1) 要素に対する JavaScript getElementsByClassName() の呼び出し例
次の例は、`getElementsByClassName()` メソッドを使用して、`<ul>` 要素の子孫である `<li>` 項目を選択する方法を示しています。
let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');
let data = [].map.call(items, item => item.textContent);
console.log(data);Code language: JavaScript (javascript)出力
['HTML', 'CSS', 'JavaScript', 'TypeScript']Code language: JavaScript (javascript)仕組み
- まず、`getElementById()` メソッドを使用して、クラス名 `menu` を持つ `<ul>` 要素を選択します。
- 次に、`getElementsByClassName()` メソッドを使用して、`<ul>` 要素の子孫である `<li>` 要素を選択します。
- 最後に、`Array` オブジェクトの `map()` メソッドを借用して、`<li>` 要素のテキストコンテンツの配列を作成します。
2) document に対する JavaScript getElementsByClassName() の呼び出し例
クラス `heading-secondary` を持つ要素を検索するには、次のコードを使用します。
let elements = document.getElementsByClassName('secondary');
let data = [].map.call(elements, elem => elem.textContent);
console.log(data);Code language: JavaScript (javascript)出力
["Example 1", "Example 2"]Code language: JavaScript (javascript)この例では、`document` オブジェクトに対して `getElementsByClassName()` メソッドを呼び出しています。そのため、ドキュメント全体でクラス `secondary` を持つ要素が検索されます。
まとめ
- JavaScript の `getElementsByClassName()` メソッドを使用して、1つ以上のクラス名を持つ要素を選択します。
