如何使用JavaScript按类名获取一个元素？

Question

我如何通过类名获取一个DOM元素？ 我猜想，通过类名获取元素的语法是getElementsByClassName，但我不确定它会返回多少个元素。

- user3249135

---

它返回一个DOM元素数组。您可以通过索引选择所需的元素。例如，使用document.getElementsByClassName('className')[0] 来获取第一个元素。 - Arunkumar Srisailapathi

@ArunKumar 从技术上讲，它是HTMLCollection，类似于数组，但不是真正的数组。 - Anthony Grist

@AnthonyGrist：是的，同意！不过你还是可以按照我说的方式访问它们，对吧？ - Arunkumar Srisailapathi

@ArunKumar（我现在只是重复自己）但它返回一个NodeList-而不是一个数组。这很重要，因为NodeList没有可用的数组函数。 - rlemon

@rlemon 得到启发了 :) - Arunkumar Srisailapathi

Answer 1

document.getElementsByClassName('className') 总是会返回多个元素，因为从概念上讲，类应该被应用于多个元素。如果你只想要DOM中具有该类的第一个元素，你可以从返回的类似数组的 HTMLCollection 中选择第一个元素。

var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];

否则，如果你真的想只选择一个元素。那么你需要使用“id”，因为在Web页面中概念上它被用作唯一元素的标识符。

// HTML
<div id="myElement"></div>

// JS
var requiredElement = document.getElementById('myElement');

- Rahat Khanna

---

getElementsByClassName 返回一个 NodeList 而不是 Array - FYI - rlemon

@Ismatjon，我相信他只是建议采用ID方法，因为它整体上更加清晰。然而，这里的最初建议仍然正确。 - rlemon

使用nodelist[index in the node list]是正确的初始答案。然而，第二部分只是一个建议（我所说的一切）。 - rlemon

“否则，如果你真的只想选择一个元素。那么你需要使用 'id'...”并不是这样的。只有一个带类的元素也完全没问题。你可以像其他答案中展示的那样，使用 document.querySelector(".the-class-name") 来找到它。 - T.J. Crowder

Answer 2

说明：

1. getElementsByClassName 返回的是一个节点列表，而不是数组

2. 你不需要 jQuery

3. 你可能在寻找的是 document.querySelector ：

我如何仅通过类名获取一个 DOM 元素？

var firstElementWithClass = document.querySelector('.myclass');

另请参阅：https://developer.mozilla.org/en/docs/Web/API/Document/querySelector

- sebilasse

---

请您能否提供一些额外的信息，解释为什么您更喜欢使用这个方法而不是getElementsByClassName？ - GeorgeButter

因为querySelector（不是querySelectorAll！）在找到第一个匹配项后就会停止搜索。但是，相比于querySelectorAll，getElementsByClassName要慢得多。 - Max

document.getElementsByClassName 返回的是一个（动态）HTMLCollection，而不是一个（静态）NodeList。 - connexo

Answer 3

您可以使用jQuery：

$('.className').eq(index)

或者您可以使用 JavaScript 内置方法：

var elements = document.getElementsByClassName('className');

这将返回一个节点列表，您可以迭代并制作您想要的内容。

如果您只想要一个元素，则可以像以下javascript版本中那样访问元素:

elements[index]

- Lucas Oliveira

---

我已经进行了编辑 - 但是请注意，你将返回一个“nodeList”而不是一个数组。它们相似，但并不完全相同。 - rlemon

在你的jQuery示例中，它仍然收集所有元素。http://api.jquery.com/eq/ 可能是你想要的。 - rlemon

我知道如何使用jQuery，但这不是我的问题。我想要纯JavaScript的方法。 - Ismatjon

@Ismatjon 正如我在其他答案评论中提到的那样，括号表示法索引将为您解决此问题。如果您需要支持IE8（不受支持），则建议不要使用getElementsByClassName。相反，请阅读有关document.querySelector和document.querySelectorAll的内容。 - rlemon

@lsmatjon 但是你可以通过上述方法访问第一个元素。 - Lucas Reis

document.getElementsByClassName 返回的是一个（动态）HTMLCollection，而不是一个（静态）NodeList。 - connexo

Answer 4

如果你正在寻找一行代码的解决方案

最初的回答：

var first = document.getElementsByClassName('test')[0];

- StefanJM

---

Uncaught ReferenceError: getElementsByClassName is not defined - connexo

Answer 5

你可以试试这个：

document.getElementsByClassName("className")[index]

- burmese-girl

Answer 6

使用NodeList.item()。

例如：

var first = getElementsByClassName('test').item(0);

- Felix Eve

---

你的代码正在使用 HTMLCollection.item()，而不是 NodeList.item()。 - connexo