不一致 JavaScript Return 值

Question

如果 ID 不存在，为什么 getElementById() return 为空，如果 class 不存在，getElementsByClassName() return 为何未定义？这似乎是 JavaScript 语言中的不一致，因为两者都是 DOM 方法。例如：

console.log( document.getElementById('bogusID') ); // null
console.log( document.getElementsByClassName('bogusClass')[0] ); // undefined

我最近不得不找出困难的方法，我的程序崩溃了，因为我错误地认为这两种方法都会 return "undefined" 失败。

return 值不同真的有原因吗？

Answer 1

console.log( document.getElementById('bogusID') ); // null

那是因为您的 DOM 上没有假 ID 项，所以 return 为空

console.log( document.getElementsByClassName('bogusClass')[0] ); // undefined

那是因为您获取的数组的索引 0 在 0 指针处没有元素。所以数组的索引 0 未定义 (undefined)

Answer 2

document.getElementsByClassName('bogusClass') returns 一个空数组，你试图访问第零个元素，它不存在，所以你得到 undefined.

Javascript，不像其他编程语言不会抛出索引超出范围的异常，因为索引是作为属性实现的，并且访问一个属性不存在 returns undefined.

在 null 和 undefined 的检查和处理方面，两者都是 javascript 中的 falsy 值，因此对于这两种情况，您的代码应该相同。

if(condition){
// Both undefined and null would not pass the condition.
}

Answer 3

我不知道该程序是如何在内部为 getElementById() & getElementByClass 定义的，但根据 mozilla 文档 getElementById() 基本上 returns 对元素的引用（对象）。

ID 例如：element = document.getElementById() Return值

元素 - 是对 Element 对象的引用，如果具有指定 ID 的元素不在文档中，则为 null。在 dom 中应该只有 1 个同名 ID，因此 ID 名称不能重复使用。

Class

例如：var elements = element.getElementsByClassName(names);

getElementsByClassName() 方法 returns 包含所有子元素的实时 HTMLCollection 具有所有给定的 class 名称。当在文档对象上调用时，将搜索完整的文档，包括根节点。在 dom 中应该只有 1 个 ID 具有相同的名称，因此 ID 名称不会重复使用，而且 HTMLCollection 使用数组来收集所有元素使用 classname.

引用

Undefined表示一个变量已经被声明但是还没有被赋值。另一方面，null 是赋值。它可以被分配给一个变量作为没有值的表示。

此外，undefined 和 null 是两种不同的类型：undefined 本身就是一个类型（undefined），而 null 是一个对象。

不一致 JavaScript Return 值

Inconsistant JavaScript Return Values

javascript

null

return-value

undefined