使用沒有getElementById和jQuery的id訪問div

我相信在JS中訪問帶有id的元素的標準方式是使用getElementById。如果人們喜歡使用jQuery，那麼他們可能會使用他們的選擇器。但最近我碰到這是下面一個非常簡單的代碼示例：使用沒有getElementById和jQuery的id訪問div

HTML：

<div id="h">Hello</div>

JS：

h.innerHTML = "Too bad";

這是唯一的代碼，並沒有其他變量聲明，只是讓人們知道。
我們如何能夠訪問div元素，就好像它是一個Javascript對象？

P.S. ：代碼示例有效。

來源

2016-05-14 Vishal Subramanyam Rajesh

這是一個*壞主意*爲依託，爲名爲全局變量'h'將跟隨這個屬性，有效地隱藏它。 –

另請參見[使用ID的DOM樹元素是否變成全局變量？]（http://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables）。 AFAIK它已經成爲標準化。 – traktor53

我們如何能夠訪問div元素，就好像它是一個Javascript 對象？

id S被默認爲全局對象的屬性（在全球範圍內）創建。

如果你這樣做<div id="h22">Hello</div>它會創建的h22

按照spec一個全局變量，

否則返回在文檔節點爲根的HTMLCollection，其過濾器僅命名對象的名稱相匹配名稱。（根據定義，這些將全部是元素。）

具有值爲名稱的id內容屬性的HTML元素。

所以window可以在規範那裏挑選從值給出的順序確定。

來源

2016-05-14 07:50:19 gurvinder372

你能否詳細說明一下？ –

它們被創建爲全局對象的「屬性」，與全局變量略有不同。特別是，創建具有相同名稱的全局變量*陰影*基礎屬性。 –

@VishalSubramanyamRajesh上面解釋 – gurvinder372

從JavaScript參考權威指南：

如果使用id屬性命名您的HTML文檔中的元素，如果 Window對象還沒有該名稱的屬性，Window對象是給定一個不可枚舉的屬性，其名稱是id屬性的值，其名稱是表示該文檔元素的HTMLElement對象。

窗口對象作爲客戶端JavaScript範圍鏈頂部的全局對象，因此這意味着您在HTML文檔中使用的id屬性將成爲您的腳本可訪問的全局變量。如果文檔包含元素<button id="okay"/>，則可以使用全局變量okay來引用該元素。

但也有一些例外。如果window對象已具有名稱的屬性，該屬性在html文檔中也用作id屬性，則該屬性將不作爲窗口對象的屬性提供。

第二，如果你有一個id作爲window屬性可用，並且我們聲明瞭一個同名的變量，那麼我們顯式創建的變量將覆蓋包含id的窗口屬性。

來源

2016-05-14 07:58:00

爲了證明上述答案几乎...

HTML：

<div id="foo"> 
    <p>bar</p> 
</div>

的Javascript：

alert(window.foo); 
console.log(window.foo.innerHTML);

警報：

[object HTMLDivElement]

控制檯：

<p>bar</p>

來源

2016-05-14 10:38:03 TeamRad

使用沒有getElementById和jQuery的id訪問div

回答

相關問題