2017-04-12 60 views
1

我学习JavaScript,我只是想完全明白的地方,这些方法都来自:了解的getElementById,等

  • 的document.getElementById
  • document.querySelector 。 。 。

我明白他们在做什么,以及如何使用它们。我知道“文档”是主要对象,您可以使用“点”符号或“['']”使用对象的键访问值。但是当我输入Chrome的控制台时,我似乎无法在Document对象下找到getElementID:console.dir(document)

在Python中,我们有Python附带的特殊方法,这些'特殊'方法吗?所以他们确实需要成为Document对象的一部分?

我知道这可能是一个愚蠢的问题,但我只是想完全理解一切从何而来。谢谢你们,我感谢你们的帮助。

问候,

安东尼

回答

4

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

窗口对象的子属性可以直接访问,如console.log(document),但也可以与console.log(window.document)一起使用,这是同样的事情。

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

你可以阅读更多关于原型在这里 - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

希望这回答您的问题!

1

一个很好的比喻使用是Python的标准库。 (请注意,我对Python不熟悉,所以如果我遇到任何问题,请随时纠正我)。

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

以类似的方式,Javascript在浏览器环境中运行时,也有一个“标准库” - 文档对象模型或DOM。这是捆绑到JavaScript运行时的对象集合及其相应的方法。其中一些对象包括windowlocationdocument。而且,这些捆绑对象中的每一个都有几个连接到它们的方法。所以,在你的榜样,捆绑document对象有几种方法,其中包括你的getElementById

,当你做console.dir并不意味着他们不会在document对象上存在它们是不可见的事实。 console.dir可能只是将它们排除在输出之外(为什么?我不能说)。

但是,如果你console.logdocument对象的各种属性,你会看到他们都在那里。

1

如果你想检查的文档对象在devtools这种方式,你需要,而不是这样做:

console.dir(Document.prototype) 

而在一般情况看documentDocument之间的区别:

console.dir(document) 
console.dir(Document) 

或者,这可能有助于更清楚地看到区别:

console.dir(document.constructor) 
console.dir(Document.constructor) 
2

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