Javascript 如何按类名获取元素？

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

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

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

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

但它导致了错误：

getElementByClass is not function

---

如何通过类获取元素？

DOM函数的名称实际上是

getElementsByClassName

，而不是

getElementByClassName

，这仅仅是因为页面上的多个元素可以具有相同的类，因此：

Elements

它的返回值将是一个节点列表实例，或

节点列表

的超集（例如，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);

正如所建议的那样，

querySelector（'.foo'）

和

queryselectoral（'.foo'）

将是更好的选择，不过，根据caniuse.com的数据，事实上，它们的支持率更高（93.99%对87.24%）：

您可以使用

getElementsByClassName

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

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

它返回一个实例

NodeList

，或其超集：

HTMLCollection

（FF）

---

另一个选项是使用

querySelector（'.foo'）

或

querySelectorAll（'.foo'）

，它们比

getElementsByClassName

具有更广泛的浏览器支持

---

您需要使用

文档.getElementsByClassName（'class_name'）

不要忘记，返回的值是一个元素数组，因此如果要使用第一个元素，请使用：

document.getElementsByClassName（'class\u name'）[0]

更新

现在您可以使用：

document.querySelector（“.class\u name”）
获取具有
class\u name
CSS类的第一个元素（
null
，如果页面上没有任何元素具有此类名）

或者
document.querySelectorAll（“.class\u name”）
获取带有
class\u name
css类的元素节点列表（如果不是of，则返回空节点列表。页面上的元素具有此类名）。
毫无理由地否决确实不道德，但确实发生了这种情况。我没有DV，但我猜有人认为您的答案没有添加任何新内容，并且您的编辑声明
getElementsByClassName
返回一个数组，这是错误的。编辑您的答案，并+1取消-1 VoteTanks@EliasVanOotegem，但有时会发生。。。我也没有DV你的答案，我也不喜欢没有动机的DV，所以我想我应该给出为什么有人会有DV你的答案的原因。“不道德”有点苛刻，但它是反社会的：如果你回答了你认为是对的，而不是，如果DV是有动机的，你可以学到一些东西。我想，如果有人投了反对票，那么这个人应该在投反对票后给出解释。如果你不给出解释，你就不能投反对票。+1对于querySelector，而不是getElementsByClassName。+1，我希望支持率是相反的，但事实证明，IE8再次在我脸上呕吐；-），尽管我不想说有“更广泛的支持”@EliasVanOotegem好吧，说得好！修复了：）提到了按类名获取元素，但没有提到如何按类获取元素（这里没有提到方法），因此我认为，我应该尝试使用document.getelementbyclasse小心使用w3schools.com作为信息源。还有比这更好的学习地方。例如，.返回值是类似于
HTMLCollection
的数组，而不是
数组
；）请投一行的票，谢谢。返回的是一个array@onmyway133：NP。只是一个旁注：返回值不是数组，它是一个
节点列表
对象，在许多方面它的行为类似于数组，但有一点不同。有关返回类型及其规格的详细信息