为什么document.getElementsByClassName在这里返回一个数组?

时间:2018-02-17 13:09:13

标签: javascript

对于一个愚蠢的问题感到抱歉,但也许有人可以向我解释。在w3school网站上,您可以找到一个模态示例。为了关闭模态,他们使用以下代码行:

HTML:

<span class="close">&times;</span>

脚本:

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

为什么在这里使用数组?我试过没有这个数组的代码,它不起作用。我试图在这个数组中使用不同的索引,它也不起作用。

为什么我们在这里使用[0]以及它是如何工作的?

2 个答案:

答案 0 :(得分:1)

根据Mozilla developer documentation,它返回一个子元素数组。

  

返回具有所有给定类名的所有子元素的类数组对象。在文档对象上调用时,将搜索完整文档,包括根节点。您也可以在任何元素上调用getElementsByClassName();它将仅返回具有给定类名的指定根元素的后代元素。

在您的情况下,您只有一个DOM元素具有类&#39; close&#39;。这就是为什么它返回一个元素的数组。

答案 1 :(得分:0)

因为您可以将class分配给HTML文档中的多个元素。 getElementsByClassName完全是这样的:所有HTML元素的数组,它们分配了给定的给定类。 [0]从该数组中选择第一个(以及仅在您的情况下)元素。

如果您想为HTML元素指定唯一标识符,请为其指定id并使用getElementById

<span id="close">&times;</span>

var span = document.getElementById("close");