2015-11-02 61 views
-7

我想用下面的代碼設置對DOM元素的引用。出於某種原因,在引用完成之後立即調用的任何東西都可以正常工作,但在應用程序的任何其他位置調用它都不會發生任何事情我沒有收到任何錯誤,比如「無法設置undefined的innerHTML」,這是最奇怪的部分。緊接聲明後,它工作得很好,以後它不會做任何事情,但其他元素以相同的方式引用並且在相同的函數中工作正常。無法引用DOM對象

var dom = new function() { 
 
    this.signInA = document.getElementById("signInPin"); 
 
    this.orderEntry = document.getElementById("orderEntry"); 
 
    this.menuGroup = document.getElementById("openGroup"); 
 
}
<div id="orderEntry"> 
 
    <div id="openGroup"> 
 
    </div> 
 
</div>

後來我打電話

dom.openGroup.innerHTML="TEST"; 

但什麼也沒有發生。這當然只是應用程序的一小部分,但我已經遍歷整個文檔來檢查DOM的其他所有參考,特別是dom.openGroup。 dom.orderEntry在整個應用程序中工作得很好,而dom.openGroup只在這個聲明的直接空間中工作。

+0

它是使用var dom = new function(){}創建的;像我說的一切工作正常不dom.openGroup – PC3TJ

+1

你也可以在你的例子中使用'dom.openGroup.innerHTML',但它存儲在'dom.menuGroup' – mplungjan

+1

你可以提供[最小,完整和可驗證的例子](http ://stackoverflow.com/help/mcve)? – Grundy

回答

0

我發現的問題是,更改時的innerHTML方法刪除了所有嵌套的DOM對象,因此,也刪除了任何對子對象的引用。

因此,事後看來,我應該只使用innerHTML來處理不會級聯的非常簡單的對象,並使用其他方法將新元素附加到這些更復雜的對象中。

+0

中使用innerHTML + =實際上,您應該**從不**使用'.innerHTML' –

+0

@JarrodRoberson抱歉,但我稍微不同意這一點。當您不使用用戶輸入並通過innerHTML屬性直接將其用於簡單任務(例如快速更改按鈕文本等)時,不會出現與innerHTML有關的實際問題。更容易且不存在缺點而不是清除現有的文本節點並創建一個新節點。 – PC3TJ

+0

[你可以不同意它只是讓你*故意無知的錯誤*而不僅僅是普通的老無知,但可以學習錯誤*](http://stackoverflow.com/questions/11515383/why-is-element-innerhtml-bad-代碼) –