如何通过类名获取元素？

Question

使用JavaScript，我们可以使用以下语法通过id获取元素：

var x=document.getElementById("by_id");

我尝试通过以下方式按类获取元素：

var y=document.getElementByClass("by_class");

但是它导致了错误:

getElementByClass is not function

如何通过类名获取元素？

- Alpha

---

在http://www.w3schools.com/js/js_htmldom.asp中提到了通过类名获取元素，但没有说明如何通过类名获取元素（没有提到任何方法）。因此，我认为应该尝试使用document.getElementByClass。 - Alpha

谨慎使用w3schools.com作为信息来源。有比那更好的学习地方。例如，MDN（https://developer.mozilla.org/en-US/）。 - Spudley

我认为发生的情况是人们看到getElementById函数并认为也有一个类版本。但没有，因为多个标签可以共享相同的类，但不能共享相同的ID。由于类和ID以类似的方式（对于初学者）分配给标记，这使他们认为可以以可互换的方式使用它们。但是它们不应该被这样使用，您应该阅读有关差异和用例的信息，以确保您正确地使用它们，因为许多其他开发人员也会从您那里期望如此。 - osirisgothra

Answer 1

DOM函数的名称实际上是 getElementsByClassName，而不是getElementByClassName，因为页面上可以有多个具有相同类名的元素，所以使用Elements。

返回值将是一个NodeList实例或NodeList的超集（例如，FF返回HTMLCollection实例）。无论如何：返回值都是类似数组的对象：

var y = document.getElementsByClassName('foo');
var aNode = y[0];

如果出于某些原因，您需要将返回对象作为数组使用，那么由于其神奇的长度属性，您可以轻松地实现：

var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);

正如yckart建议的那样，querySelector('.foo')和querySelectorAll('.foo')更可取，因为它们有更好的支持率（93.99% vs 87.24%），可以在caniuse.com上查看：

• querySelector（all）
• getElementsByClassName
• 不要使用w3schools学习任何东西
• 查阅MDN获取准确信息

- Elias Van Ootegem

---

谢谢。返回的是一个数组。 - onmyway133

@onmyway133：没问题。只是顺便提一下：返回值不是数组，而是一个“NodeList”对象，在很多方面行为类似于数组，但有区别。请查看MDN文档以获取有关返回类型和其详细信息的详情。 - Elias Van Ootegem

Answer 2

另一个选择是使用 querySelector('.foo') 或 querySelectorAll('.foo')，这两者的浏览器支持比 getElementsByClassName 更广泛。

http://caniuse.com/#feat=queryselector

http://caniuse.com/#feat=getelementsbyclassname

- yckart

Answer 3

您需要使用document.getElementsByClassName('class_name');，请注意返回的值是元素的数组，如果要获取第一个值，请使用：document.getElementsByClassName('class_name')[0]. 更新 现在您可以使用document.querySelector(".class_name")来获取带有class_name CSS类的第一个元素（如果页面上没有这个类名，则会返回null），或者使用document.querySelectorAll(".class_name") 来获取一个带有class_name CSS类的元素NodeList（如果页面上没有这个类名，则会返回一个空的NodeList）。请保留原来的HTML标签。

- udidu

---

返回值是类似数组的 HTMLCollection，而不是 Array https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname ;) - yckart

Answer 4

你可以使用

getElementsByClassName

假设您有一些元素并应用了类名“test”，那么您可以按照以下方式获取元素

var tests = document.getElementsByClassName('test');

它返回了一个NodeList的实例，或者它的超集：HTMLCollection(火狐浏览器)。 更多信息

- Talha