为什么 HTML 实例如果元素不存在，则返回 false？

Question

首先，我远离键盘，只是通过jsconsole应用程序检查我的手机。其次，我得到了一个简单的片段，如下所示：

const foo = document.getElementsByClassName('bar');
foo instanceof HTMLCollection // true
foo[0] instanceof HTMLElement // false

我只是想知道为什么 foo[0] 在元素不存在时返回 false。这是由未定义的元素引起的吗？还是什么？有人提到这个吗？请给我一些报价，谢谢！

Answer 1

getElementsByClassName将返回一个 NodeList，这是一个 HTMLCollection。因此，如果给定类没有元素，您仍然会得到一个空的节点列表。

但是，当您尝试访问 oth 元素时，因为它是一个空列表，因此您会undefined（正如 kaiido 正确建议的那样）。因此你会得到false.

下面是一个示例表示形式：

var test = document.getElementsByClassName('test');
console.log(Object.prototype.toString.call(test))
console.log(Object.prototype.toString.call(test[0]))

Answer 2

也许你的问题是"HTMLCollection"/"HTMLElement"并不重要。

const arr = []
arr // []
arr[0] // undefined
arr[0] instanceof HTMLElement // false