如何按类名获取元素？

Question

使用JavaScript，我们可以使用以下语法获取id：

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

我尝试按照以下方式逐个获取元素：

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

但它导致了错误：

getElementByClass is not function

如何通过类获取元素？

Answer 1

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

this的返回值是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);

根据caniuse.com的说法，由于yckart建议querySelector('.foo')和querySelectorAll('.foo')会更好，因为它们确实得到更好的支持（93.99％对87.24％） / p>

• querySelector(all)
• getElementsByClassName
• Don't use w3schools to learn something
• Refer to MDN for accurate information

Answer 2

另一种选择是使用querySelector('.foo')或querySelectorAll('.foo')，其浏览器支持比getElementsByClassName更广。

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

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

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。）

Answer 4

你可以使用

getElementsByClassName

假设您有一些元素并且应用了类名'test'，那么，您可以获得如下所示的元素

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

返回实例NodeList或其超集：HTMLCollection（FF）。

<强> Read more