javascript - 为什么是 "document.title"而不是 "document.head.title"？回复 : Traversing the DOM

Question

我刚刚开始学习客户端 JavaScript 并使用在线教程，所以请多多包涵。

这个问题是基于我对以下内容的理解:

要访问文档正文的属性，语法是“document.body”，它返回正文中的所有元素。

同样，当您访问头部时，您使用“document.head”。有道理，最重要的是，它有效。

但是，当我尝试按照相同的逻辑访问 body 或 head 中的元素时，我得到了“undefined”的返回值。例如，document.body.h1 返回“undefined”，尽管在 body 元素中有一个 h1 元素。

此外，当我输入 document.head.title 时——“未定义”。

然而，奇怪的是，当我输入“document.title”时，它返回与标题标签关联的字符串值。

我认为要访问标题，您必须通过 head 访问它，因为它是嵌套在 head 中的元素。但是好吧，没关系。使用相同的逻辑，我应该能够输入 document.h1 并获取它的值。不，相反，我得到了未定义。

有好心人向我解释一下为什么这种行为如此不一致。提前致谢。

Answer 1

你真的问了两个问题:

1. 为什么是 document.title 而不是 document.head.title？

和

1. 如果 body 中有 h1，为什么 document.body.h1 不返回元素？

文档.title

document.title 是历史性的。浏览器环境的各个部分是由 1990 年代多个不同的人/组织临时开发的。 :-) 也就是说，它是文档的标题，所以即使您在 head 中使用 title 标记，这也不是一个不合理的地方。

document.body.h1

一个答案是:因为没有人决定那样设计。 有一些早期的东西，比如 document.all(文档中所有元素的列表)，甚至还有特定于标签的东西(我忘了它们到底是什么，但它们不是距离你的 document.body.h1 一百万英里——我认为 document.tags.h1 或其他东西，它又是一个列表。)

但另一个答案是:因为 DOM 是一棵树。 body 可以有多个 h1 元素，既可以作为直接子元素也可以作为子元素的子元素(或更深层次的元素)；统称为后代。使用所有这些创建自动列表被证明无法扩展到大型文档。

相反，您可以通过多种方法查询 DOM(整个文档或特定元素的内容):

• > getElementById - (就在 document 上)使用其 id 属性值获取一个元素。
• > querySelector - 找到匹配 CSS 选择器的第一个元素(可以在 document 或元素上使用)。如果没有匹配项，则返回 null。
• > querySelectorAll - 获取与 CSS 选择器匹配的所有元素的列表(可以在 document 或元素上使用)。您可以依靠取回列表；当然，它的长度可能是0。
• > getElementsByTagName - 获取具有给定标签名称(例如 "h1")的所有元素的列表。
• > getElementsByClassName -(IE8 及更早版本不支持)获取具有给定类的所有元素的列表。

还有很多。参见 MDN's web documentation和/或 WHAT-WG DOM Standard了解更多。

一些自动列表仍然存在(它们被大量使用以至于必须维护/保留)，例如 document.forms , document.links , rows属性(property) HTMLTableElement和 HTMLTableSectionElement实例，cells属性(property) HTMLTableRowElement实例和其他各种实例。