2017-04-12 41 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的一部分。