Javascript：如何按类名只获取一个元素？

Question

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

提前致谢。

Answer 1

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

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

Answer 3

你可以使用jQuery：

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

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

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

这将返回一个元素的nodeList，您可以迭代并制作所需的元素。

如果您只想要一个，您可以访问javascript版本中的元素，如下所示：

elements[index]

Answer 4

对于任何想要一支班轮的人

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

Answer 5

使用NodeList.item()。

例如：

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

Answer 6

您可以使用querySelector

进行以下操作

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