为什么getElementById不能用于文档以外的元素？

Question

为什么document.body.getElementById(idOfElem)和document.body.getElementsByName(nameOfElem)无效？

和

为什么document.body.getElementByTagName(tagOfElem)和document.body.getElementByClassName(classOfElem)有效？

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

  

TypeError：document.body.getElementById不是函数[了解更多]

Answer 1

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

document以外的元素具有以下功能：getElementsByTagName，getElementsByClassName，querySelector和querySelectorAll，但不包含getElementById。

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

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

为什么要定义其他功能？

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

<强>结论：

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

Answer 2

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

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

Answer 3

document.body.getElementById()不存在。 使用document.getElementById()从文档中获取具有匹配ID的元素。

document.getElementsByTagName() - 获取与文档中的标记名称匹配的所有元素。