如何通过类名获取元素？[重复]

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

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

我尝试以下按类获取元素：

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

但这导致了错误：

getElementByClass is not function

如何按类获取元素？

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

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

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

如果由于某种原因需要返回对象作为数组，则由于其不可思议的length属性，可以轻松地做到这一点：

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

正如yckart所建议的那样querySelector('.foo')，querySelectorAll('.foo')它将是更可取的，因为caniuse.com的确确实提供了更好的支持（93.99％vs 87.24％）：

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

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

并且不要忘记返回的值是一个元素数组，因此如果您想第一次使用它：

document.getElementsByClassName('class_name')[0]

更新

现在您可以使用：

document.querySelector(".class_name")获取具有class_nameCSS类的第一个元素（null如果页面上没有其他元素具有该类名，则将返回此元素）

或者document.querySelectorAll(".class_name")使用class_namecss类获取元素的NodeList （如果页面上的所有元素都不具有此类名称，则返回空的NodeList）。

您可以使用

getElementsByClassName

假设您有一些元素，并应用了一个类名“ test”，因此，您可以获得如下元素

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

它返回一个实例NodeList，或其超集：HTMLCollection（FF）。

本文地址：http://javascript.askforanswer.com/ruhetongguoleiminghuoquyuansuzhongfu.html
文章标签：dom , javascript
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！