如何按类名获取元素？

Question

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

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

我试着按顺序逐个获取:

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

但它导致了错误:

getElementByClass is not function

我怎样才能通过它的类得到一个元素？

Answer 1

实际上getElementsByClassName,DOM函数的名称并不是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);

根据caniuse.com的说法querySelector('.foo'),正如yckart建议并且querySelectorAll('.foo')更可取的是,因为它们确实得到了更好的支持(93.99%对87.24%):

@ onmyway133：NP。请注意：返回值不是数组，而是一个NodeList对象，它在许多方面的行为都类似于数组，但有所不同。[查看MDN文档]（https://developer.mozilla.org/zh-CN/docs/Web/API/ParentNode/querySelectorAll），以获取有关返回类型及其具体功能的详细信息 (3认同)

Answer 2

另一种选择是使用,querySelector('.foo')或者querySelectorAll('.foo')拥有比浏览器更广泛的支持getElementsByClassName.

Answer 3

你需要使用 document.getElementsByClassName('class_name');

并且不要忘记返回的值是一个元素数组,所以如果你想要第一个使用:

document.getElementsByClassName('class_name')[0]

返回值是一个“类似数组”的“HTMLCollection”，而不是“Array” https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname ;) (2认同)

Answer 4

您可以使用

getElementsByClassName

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

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

它返回一个实例NodeList或其超集:HTMLCollection(FF).