当innerHTML遇上document.getElementById

最新推荐文章于 2024-09-25 15:23:45 发布

SoS1437

最新推荐文章于 2024-09-25 15:23:45 发布

阅读量4.5k

点赞数

分类专栏： Web2.0 文章标签： javascript function button html 文档 div

本文链接：https://blog.csdn.net/SoS1437/article/details/4142785

版权

Web2.0 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

不知在通常的开发中，大家有没有遇到过这样的问题。

例如现在有一个控件<input type="text" id="name" name="name"/> ,如果想取这个控件的值有很多中方法，其中document.getElementById('name').value既是其中的一种。但是在实际的开发中可能碰到使用这个方法取不到值的情况。为了解决这个问题，我们有必要明白document.getElementById()这个函数的原理。

这个函数是基于DOM树模型的，其中的id必须是唯一的。如果，id不唯一，取得是DOM树模型中第一个具有该标识的对象。因此，当使用这个函数取不到值时，因该检查一下在使用这个函数之前，是否有这个id，是否有同名的标识。

innerHTML通常用来更改小区间的文档内容，可以和动态语言相结合达到很好的动态显示内容的效果。从DOM树模型来看，使用innerHTML可能对文档模型发生修改。这个时候使用JS来操作被修改区域的对象的时候，就需要从整体出发，尤其要注意ID是否重复。

下面介绍一个让人迷惑的实例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>在外部你取不到我的值</title> <mce:script language="javascript" ></mce:script> <mce:script language="JavaScript" type="text/JavaScript"></mce:script> </head> <body> <div id="a" style="display:none " mce_style="display:none "> a<input type="text" id="Aname" name="Aname" οnclick="alert('AName='+this.value);alertAOutSide()"/> </div> <div id="b" style="display:none" mce_style="display:none"> b<input type="text" id="Bname" name="Bname" onClick="alert('BName='+this.value); alertBOutSide()"/> </div> <div id="container" style="position:absolute; left:120px; top:18px; width:303px; height:26px; z-index:1"> </div> <mce:script type="text/javascript"></mce:script> <br/> <div> <input name="button" type="button" id="change" onClick="change()" value="更换内容"> </div> </body> </html>

这个HTML的基本思路是，由一个Div层作为container，动态的控制Div层中的内容。但是在浏览这个页面的时候，你会发现，使用alertAOutSide()和alertBOutSide()函数都取不到对应的填入的值,同时取到的值总是为空。

通过这个现象，我们可以发现，在函数alertAOutSide()中所取到的对象和直接onclick后alert语句中的对象不一样。那么这是为什么呢？

通过仔细分析文档结构，可以发现，当对container的div的innerHTML赋值完以后，innerHTML中就想到也增加了一个a<input type="text" id="Aname" name="Aname" οnclick="alert('AName='+this.value);alertAOutSide()"/>这样的语句，于是这个文档中就有两个id为Aname的对象。我们所填入的值是在第二个里，而我们用document.getElementById的时候取得是第一个值，第一个的值总是空，所以总是取不到值。

明白了原因也就好解决了。解决的思路就是避免名称冲突。解决方法有很多种。基本都是使用display来控制，或者style.visibility来控制。下面给出一种解决方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test2</title> <mce:script language="javascript" ></mce:script> <mce:script language="JavaScript" type="text/JavaScript"></mce:script> </head> <body> <div id="container" style="position:absolute; left:120px; top:18px; width:303px; height:26px; z-index:1"> <div id="a" style="display:none " mce_style="display:none "> a<input type="text" id="Aname" name="Aname" οnclick="alert('AName='+this.value);alertAOutSide()"/> </div> <div id="b" style="display:none" mce_style="display:none"> b<input type="text" id="Bname" name="Bname" onClick="alert('BName='+this.value); alertBOutSide()"/> </div> </div> <mce:script type="text/javascript"></mce:script> <br/> <div> <input name="button" type="button" id="change" onClick="change()" value="更换内容"> </div> </body> </html>