2015-11-02 63 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-代码) –