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

回答