logo标签列表

body没有getElementById方法？

javascriptdom
7
这个问题困扰了我很久。如果这是一个愚蠢的问题，请原谅。
之前，我已经知道可以通过class名称获取元素。
document.body.getElementsByClassName("foo");

我非常懒，所以我只是复制并粘贴代码到其他部分来完成这个任务。

document.body.getElementById("bar");

我无意中发现它不起作用。我进行了测试，结果显示：

TypeError: Object #<HTMLBodyElement> has no method 'getElementById'

那么为什么它有getElementsByClassName、getElementsByTagName和所有类似的方法，但只没有getElementById呢？

typeof document === typeof document.body   //true

它们的类型相同，因此它们应该拥有相同的东西。但是在这里似乎并非如此。

3
typeof 对这两个值都返回 "object"，这意味着它们可以是任何类型的对象。它并不告诉你它们具有哪些方法。 - pimvdb
2
它们的类型相同，因此它们应该拥有相同的东西。不是的。它们都是对象，但并不是所有对象都共享相同的属性/方法。 - Artefact2
2
推荐在JavaScript中不要检查类型以查看它们是否相同，而是迭代属性并检查它们。因为 typeof document === typeof document.body === typeof null === typeof [] === "object"。 - nicosantangelo
4个回答
5

您可以拥有多个相同类名的元素，因此将搜索范围缩小到特定节点开始是有意义的。

对于ID来说并不合适，因为应该是唯一的。

在document中只能有一个id，这就是为什么getElementById是document的方法。

示例：

<body>
    <div id="start">
        <span class="a">
    </div>
    <div class="a">
    </div>
</body>

从节点 <div id="start"> 开始搜索类 a，将给您返回一个元素，如果您从顶层节点 document 开始搜索，它将返回两个元素。
关于 typeof 比较：
typeof 1 == typeof 2 == "Number" // true
1 !== 2 // true.

typeof 只检查类型，而不是值，document和document.body都是对象，但是不同的对象。

typeof document === typeof document.body === typeof null === "object" // true
document === document.body // false!!!

如您所见，null和document共享相同的类型，但它们是否有相同的方法呢？不是

4

Ids对整个文档具有唯一性，因此将它们限定在文档的子节点中是没有意义的。

类名不是唯一的，有些情况下查找在另一个元素下具有类名的元素是有意义的。

body.getElementsByClassName('foo') 会获取具有类名'foo'但包含在body内的元素。

document.getElementsByClassName('foo') 将获取整个文档中具有类名'foo'的所有元素，包括<head>。

1

typeof document和typeof document.body是相同的，因为它们都是object。在JS中，类型与对象的关系并不像您想象的那样工作。所以，它们不是相同的，也没有特定的理由支持相同的函数集。 （即使具有相同原型的对象也不必支持相同的函数集，但这是另一回事。）只需在document上调用getElementById，它就会起作用。

（“医生，医生，当我将手臂举过头顶并快速旋转成8字形时，会感到疼痛！”“是吗？那就别这么做了。”）

0
你的 typeof 例子并不是在比较它们是否是相同的东西，而是在比较它们是否是相同的 '类型'，对于这两个都返回 object：
从 Firebug 控制台输出：
>>> typeof document
"object"
>>> typeof document.body
"object"

更多关于 typeof 的细节可以在以下链接中找到：

https://developer.mozilla.org/en/JavaScript/Reference/Operators/typeof

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接