Javascript：如何仅通过类名获得一个元素？

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

在此先感谢。

2014-01-29 Ismatjon

它返回DOM元素的阵列。您可以选择所需的索引。像document.getElementsByClassName（'className'）[0]获取第一个元素。 –

@ArunKumar从技术上讲，这是一个HTMLCollection，它是一个数组，而不是一个实际的数组。 –

@AnthonyGrist：是的同意！你仍然可以按照我说的方式访问它们，不是吗？ –

document.getElementsByClassName('className')总是返回多个元素，因为在概念类是为了被应用到多个元素。如果您只需要DOM中的第一个元素，那么您可以从返回的数组中选择第一个元素。

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

否则，如果你真的只想选择一个元素。然后，您需要在概念上使用'id'，将其用作网页中唯一元素的标识符。

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

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

2014-01-29 16:11:40

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

@Ismatjon我相信他只是建议ID方法，因为它更清洁总体。然而，这里的最初建议是成立的。 – rlemon

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

您可以使用jQuery：

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

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

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

此返回可以迭代，让你想要什么元素的节点列表。

如果你想只有一个，您可以访问该元素的JavaScript版本是这样的：

elements[index]

2014-01-29 16:04:24

我做了编辑 - 但建议您将返回一个** nodeList **不是一个数组。他们是相似的，但不一样。 – rlemon

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

我知道如何使用jQuery。这不是我要问的。我想要一个纯粹的JavaScript方法。 – Ismatjon

澄清：

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

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

2017-03-16 17:18:53 sebilasse

请您提供一些额外的信息，说明您为什么喜欢使用它来getElementsByClassName？ – Buts

回答