files/ja/web/api/document/getelementsbyclassname/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

---
title: Document.getElementsByClassName()
slug: Web/API/Document/getElementsByClassName
tags:
  - API
  - DOM
  - DOM Element Methods
  - Element
  - HTML5
  - Method
  - Reference
  - メソッド
translation_of: Web/API/Document/getElementsByClassName
---
<div>{{APIRef("DOM")}}</div>

<p>{{domxref("Document")}} インターフェイスの <strong><code>getElementsByClassName</code></strong> メソッドは、<span class="seoSummary">指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。</span> {{domxref("document")}} オブジェクトに対して呼び出したときは、ルートノードを含む文書全体が検索されます。任意の要素に対して {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} を呼び出すこともできます。その場合は、指定されたルート要素下の指定されたクラス名を持つ要素だけを返します。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox">var <var>elements</var> = document.getElementsByClassName(<var>names</var>); // または
var <var>elements</var> = <var>rootElement</var>.getElementsByClassName(<var>names</var>);</pre>

<ul>
 <li><var>elements</var> は、見つかった要素の生きた {{domxref("HTMLCollection")}} です。</li>
 <li><var>names</var> は文字列で、一致させるクラス名を表します。複数のクラス名はホワイトスペースで区切ります。</li>
 <li>{{domxref("Element.getElementsByClassName", "getElementsByClassName")}} は、 {{domxref("document")}} だけでなく、任意の要素に対して呼び出すことができます。呼び出した要素が検索のルートとして使われます。</li>
</ul>

<h2 id="Examples" name="Examples">例</h2>

<p>'test' クラスを持つすべての要素を取得します。</p>

<pre class="brush: js">document.getElementsByClassName('test')</pre>

<p>'red' および 'test' クラスを両方持つすべての要素を取得します。</p>

<pre class="brush: js">document.getElementsByClassName('red test')</pre>

<p>'main' という ID を持った要素の中にある、 'text' クラスを持つすべての要素を取得します。</p>

<pre class="brush: js">document.getElementById('main').getElementsByClassName('test')</pre>

<p>'test' クラスを持つ最初の要素を取得し、一致する要素がなければ <code>undefined</code> になります。</p>

<pre class="brush: js">document.getElementsByClassName('test')[0]</pre>

<p>メソッドの <var>this</var> 値として {{domxref("HTMLCollection")}} を渡すことで、 Array プロトタイプのメソッドを <code>HTMLCollection</code> で使用することができます。ここでは、 'test' クラスを持つすべての div 要素を検索します。</p>

<pre class="brush: js">var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
  return testElement.nodeName === 'DIV';
});</pre>

<h3 id="Get_the_first_element_whose_class_is_test" name="Get_the_first_element_whose_class_is_'test'">クラスが 'test' である最初の要素を取得する</h3>

<p>これは最もよく使われる操作のメソッドです。</p>

<pre>&lt;html&gt;
&lt;body&gt;
    &lt;div id="parent-id"&gt;
        &lt;p&gt;hello world 1&lt;/p&gt;
        &lt;p class="test"&gt;hello world 2&lt;/p&gt;
        &lt;p&gt;hello world 3&lt;/p&gt;
        &lt;p&gt;hello world 4&lt;/p&gt;
    &lt;/div&gt;

    &lt;script&gt;
        var parentDOM = document.getElementById("parent-id");

        var test = parentDOM.getElementsByClassName("test"); // 一致する要素のリストであり、要素自身では*ない*
        console.log(test); //HTMLCollection[1]

        var testTarget = parentDOM.getElementsByClassName("test")[0]; // 求める最初の要素
        console.log(testTarget); //&lt;p class="test"&gt;hello world 2&lt;/p&gt;
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<h3 id="Multiple_Classes_Example" name="Multiple_Classes_Example">複数のクラスの例</h3>

<p><code>document.getElementsByClassName</code> は <code>document.querySelector</code> や <code>document.querySelectorAll</code> ととても似た動きをします。指定されたクラス名がすべてある要素のみが選択されます。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;span class="orange fruit"&gt;Orange Fruit&lt;/span&gt;
&lt;span class="orange juice"&gt;Orange Juice&lt;/span&gt;
&lt;span class="apple juice"&gt;Apple Juice&lt;/span&gt;
&lt;span class="foo bar"&gt;Something Random&lt;/span&gt;
&lt;textarea id="resultArea" style="width:98%;height:7em"&gt;&lt;/textarea&gt;</pre>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">// getElementsByClassName は指定された両方のクラスを持つ要素のみを選択する
var allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
var result = "document.getElementsByClassName('orange juice')";
for (var i=0, len=allOrangeJuiceByClass.length|0; i&lt;len; i=i+1|0) {
    result += "\n  " + allOrangeJuiceByClass[i].textContent;
}


// querySelector は完全一致で選択する
var allOrangeJuiceQuery = document.querySelectorAll('.orange.juice');
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (var i=0, len=allOrangeJuiceQuery.length|0; i&lt;len; i=i+1|0) {
    result += "\n  " + allOrangeJuiceQuery[i].textContent;
}

document.getElementById("resultArea").value = result;</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample('Multiple_Classes_Example', '100%', 200)}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-document-getelementsbyclassname', 'document.getElementsByClassName')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("api.Document.getElementsByClassName")}}</p>