如何通过类名获取元素？

javascript dom

2022-08-30 01:40:42

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

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

我尝试按类获取元素：

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

但它导致了错误：

getElementByClass is not function

如何按元素的类获取元素？

答案 1

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

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

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所建议的那样，并且更可取，但是，根据 caniuse.com，它们确实得到了更好的支持（93.99%对87.24%）：querySelector('.foo')querySelectorAll('.foo')

答案 2

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