了解 getElementById 等答案

【问题标题】：Understanding getElementById, etc了解 getElementById 等
【发布时间】：2017-04-12 00:21:01
【问题描述】：

我正在学习Javascript，我只是想完全了解这些方法的来源：

document.getElementByID
document.querySelector . . .
等

我了解它们的作用以及如何使用它们。我知道“文档”是主要对象，您可以使用“点”表示法或“['']”来使用对象的键访问值。但是当我在 Chrome 的控制台中输入时，我似乎无法在 Document 对象下找到 getElementID：console.dir(document)

在 Python 中，我们有 Python 自带的特殊方法，这些是“特殊”方法吗？那么它们确实需要成为 Document 对象的一部分吗？

我知道这可能是一个愚蠢的问题，但我只是想完全了解所有内容的来源。谢谢大家，感谢您的帮助。

问候，

安东尼

【问题讨论】：

如果您想在 devtools 中以这种方式检查 Document 对象，您需要改为：console.dir(Document.prototype)。总的来说，看看document 和Document 之间的区别：console.dir(document) 与 console.dir(Document) ……或者可能有助于更清楚地看到区别的东西：console.dir(document.constructor) 与 console.dir(Document.constructor)

标签： javascript dom

【解决方案1】：

document 对象是window 对象的子对象。这些在 JavaScript 中被视为“浏览器内置全局变量”。

window 对象的子属性可以像console.log(document) 一样直接访问，但也可以和console.log(window.document) 一样使用。

documents的原型下存在getElementById等方法。您可以使用console.dir(Document.prototype)查看此内容。

您可以在此处阅读有关原型的更多信息 — https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

希望能回答你的问题！

【讨论】：

【解决方案2】：

这些方法存在于__proto__ 内部，它们是document 对象的prototype 的一部分。

【讨论】：

【解决方案3】：

一个很好的类比是 Python 的标准库。（请注意，我不熟悉 Python，所以如果我有任何错误，请随时纠正我）。

Python 安装附带一个标准库 - 一组对象及其相应的方法，它们捆绑到 Python 运行时中。

以类似的方式，Javascript 在浏览器环境中运行时，也有一个“标准库”——文档对象模型或 DOM。这是捆绑到 JavaScript 运行时的对象及其相应方法的集合。其中一些对象包括window、location 和document。而且，这些捆绑的对象中的每一个都附加了几个方法。因此，在您的示例中，捆绑的 document 对象有多种方法，包括您的 getElementById 等。

当您执行console.dir 时它们不可见这一事实并不意味着它们不存在于document 对象上。 console.dir 可能只是将它们排除在其输出之外（为什么？我不能说）。

但是如果你console.logdocument 对象的各种属性，你会发现它们都在那里。

【讨论】：