为什么 getElementById 对文档以外的元素不起作用？

Question

为什么document.body.getElementById(idOfElem)和document.body.getElementsByName(nameOfElem)不工作？

和

为什么document.body.getElementByTagName(tagOfElem)和document.body.getElementByClassName(classOfElem)工作？

使用第一个时，浏览器抛出此错误：

类型错误：document.body.getElementById 不是函数[了解更多]

Answer 1

由于 ID 是唯一的，因此您必须使用document.getElementById它，因为它是唯一具有该功能的 DOM 元素。

比其他元素document具有以下功能：getElementsByTagName，getElementsByClassName，querySelector和querySelectorAll，但不是getElementById。

为什么不在文档以外的元素上定义它？

具有 ID 的元素无论其父元素是什么都是唯一的。因此，在使用元素的 ID 获取元素之前知道元素的父元素是不必要的。所以，没有必要把这个函数getElementById放在所有元素上，只放在上面document就足够了。

为什么要定义其他函数？

因为有时只有当它们位于已知元素内时，您才需要使用某些类获取<div>s 或<p>s 或元素.cls。然后，如果您document用作根，结果将是文档中的所有元素，而不仅仅是所需元素中的元素。

结论：

document.getElementById将始终最多返回一个元素，因此为什么要在每个 DOM 元素上重新定义它（这将毫无用处）。但其他函数，如getElementsByTagName, getElementByClassName, ... 可以返回尽可能多的。所以我们把它们放在所有元素上，这样我们就可以通过指定一个根来开始搜索来缩小搜索范围。

Answer 2

getElementById是 的方法document，而不是 的方法document.body。也同样如此getElementsByName。

另一方面，getElementByTagName和getElementByClassName可以在任何元素上调用，包括body.