Revision 572237 of Document.getElementsByClassName()

<h2 id="Summary" name="Summary">Summary</h2>
<p>Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} on any element; it will return only elements which are descendants of the specified root element with the given class names.</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="syntaxbox">
<var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or:
<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre>
<ul>
 <li><var>elements</var> is a {{ domxref("HTMLCollection") }} of found elements.</li>
 <li><var>names</var> is a string representing the list of class names to match; class names are separated by whitespace</li>
 <li>getElementsByClassName can be called on any element, not only on the document. The element on which it is called will be used as the root of the search.</li>
</ul>
<h2 id="Examples" name="Examples">Examples</h2>
<p>Get all elements that have a class of 'test'</p>
<pre class="brush: js">
document.getElementsByClassName('test');</pre>
<p>Get all elements that have both the 'red' and 'test' classes</p>
<pre class="brush: js">
document.getElementsByClassName('red test');</pre>
<p>Get all elements that have a class of 'test', inside of an element that has the ID of 'main'</p>
<pre class="brush: js">
document.getElementById('main').getElementsByClassName('test');</pre>
<p>We can also use methods of Array.prototype on any {{ domxref("HTMLCollection") }} by passing the <var>HTMLCollection</var> as the method's <var>this</var> value. Here we'll find all div elements that have a class of 'test':</p>
<pre class="brush: js">
var testElements = document.getElementsByClassName('test');
var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';
});</pre>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>3.0</td>
    <td>9.0</td>
    <td>{{ CompatVersionUnknown() }}</td>
    <td>{{ CompatVersionUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Mobile</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="Specification" name="Specification">Specification</h2>
<ul>
 <li><a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-getelementsbyclassname"><span class="external">W3C: getElementsByClassName</span></a></li>
</ul>