如何通过类名获取元素？

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

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

我尝试按类获取元素:

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

但结果却是错误的:

getElementByClass is not function

如何通过它的类获得元素？

589904 次浏览
小开
最佳答案

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);

根据 caniuse.com 的数据，赛车认为 querySelector('.foo')和 querySelectorAll('.foo')更可取，因为它们确实得到了更好的支持(93.99% 比87.24%) :

小开

你可以利用

getElementsByClassName

假设您有一些元素并应用了一个类名‘ test’，那么您可以得到如下元素

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

它返回一个实例 NodeList，或者它的超集: HTMLCollection(FF)。

继续读

小开

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

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

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

小开

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

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

document.getElementsByClassName('class_name')[0]

更新

现在你可以使用:

使用 class_name CSS 类获取第一个元素(如果页面上的元素没有这个类名，则返回 null)

或者 document.querySelectorAll(".class_name")来获取带有 class_name css 类的元素的 NodeList (如果非。页面上的元素有这个类名)。


提交答案