JavaScript选择器：getElementsByClassName

Just as document.getElementById selects an element with a particular id value, getElementsByClassName gathers elements on a page that share a defined class value. As the plural name of the method suggests, getElementsByClassName collects an array of elements, never just one result… even if it matches only one element on the page.

就像document.getElementById选择具有特定id值的元素一样， getElementsByClassName在页面上收集共享已定义class值的元素。 就像方法的复数名称所暗示的那样， getElementsByClassName收集元素数组 ， getElementsByClassName只是一个结果，即使它仅与页面上的一个元素匹配。

Technically, getElementsByClassName recovers an HTMLCollection, an array-like structure, rather than a true array. This HTMLCollection is updated with alterations to the DOM; most array methods work on it.

从技术上讲， getElementsByClassName恢复HTMLCollection ，它是一种类似于数组的结构，而不是真正的数组。 此HTMLCollection随DOM的变化而更新; 大多数数组方法都可以使用它。

If we have an element on the page:

如果页面上有一个元素：

<div class="eclipse"> … </div>

Then we can get it (and all other elements that use the class) using getElementsByClassName. As with getElementById, we usually place the result into a variable:

然后，我们可以使用getElementsByClassName获得它(以及所有其他使用该类的元素)。 与getElementById ，我们通常将结果放入变量中 ：

var totality = document.getElementsByClassName("eclipse");

Again, like getElementById, the class name is not preceded by a CSS selector period.

同样，像getElementById一样，类名前面没有CSS选择器句点。

As the first “slot” in the resulting array, the element could be shown in the console with:

作为结果数组中的第一个“插槽”，该元素可以在控制台中显示为：

totality[0]
> <div class="eclipse"> … </div>

Because the result will always be an array, you’ll need to loop through it in order to ensure that all the elements in the array are affected equally. Traditionally, this is achieved with a for loop, although there are many alternatives:

由于结果将始终是一个数组，因此需要遍历该数组以确保数组中的所有元素均受到相同的影响。 传统上，这是通过for循环实现的，尽管有很多选择：

for (var i = 0; i < totality.length; i++) {
  // do something to totality[i];
}

多重性 (Multiplicity)

Elements can have multiple classes applied to them, so getElementsByClassName allows us to check for elements that use particular combinations of classes:

元素可以应用多个类，因此getElementsByClassName允许我们检查使用特定类组合的元素：

var totality = document.getElementsByClassName("eclipse partial");

The above JavaScript will only gather elements that have classes of both eclipse and partial applied to them.

上面的JavaScript将仅收集同时具有 eclipse 和 partial类的元素。

范围和目标 (Scope and Target)

Unlike document.getElementById, getElementsByClassName can work from any location in a document, meaning that we can narrow our collection to the children of a particular element. For example, if we had a <nav> element that contained a series of links, and some of those links shared a particular class:

与document.getElementById不同， getElementsByClassName可以在文档中的任何位置工作，这意味着我们可以将集合缩小到特定元素的子元素。 例如，如果我们有一个包含一系列链接的<nav>元素 ，并且其中一些链接共享一个特定的类：

<nav id="mainnav">
    <a href="#">Home</a>
    <a href="#">Launch</a>
    <a href="#" class="multi">Options</a>
    <a href="#" class="multi">Hohmann Transfers</a>
    <a href="#" class="special">Belters</a>
</nav>

If we wanted to gain only the links that have the multi class, and wish to be assured that these links come solely from within the #mainnav element, we could do the following:

如果我们想赢得那么只有拥有链接multi类，并希望得到保证，这些链接来自内部独自来#mainnav元素，我们可以做到以下几点：

var nav = document.getElementById("mainnav");
var navlinks = nav.getElementsByClassName("multi");

Or alternatively, if we didn’t need to retain the reference to #mainnav:

或者，如果我们不需要保留对#mainnav的引用：

var navlinks = document.getElementById("mainnav").getElementsByClassName("multi");

结论 (Conclusion)

getElementsByClassName has excellent support in all modern browsers, including IE9+. Highly useful, it is surpassed in flexibility only by querySelectorAll, which we’ll be looking at next.

getElementsByClassName在包括IE9 +在内的所有现代浏览器中均具有出色的支持。 此功能非常有用，仅在querySelectorAll才具有灵活性，我们接下来将介绍它。

翻译自: https://thenewcode.com/546/JavaScript-Selectors-getElementsByClassName