当innerHTML遇上document.getElementById-白红宇的个人博客

发布日期：2021-09-30 11:34:36 浏览次数：6 分类：技术文章

本文共 6640 字，大约阅读时间需要 22 分钟。

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

例如现在有一个控件view plaincopy to clipboardprint?

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

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

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

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

view plaincopy to clipboardprint?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"">

<html>

<head>

<title>在外部你取不到我的值</title>

<mce:script language="javascript" ><!--

function alertAOutSide(){

var a=document.getElementById('Aname');

alert('outsideA'+a.value);

}

function alertBOutSide(){

var b=document.getElementById('Bname');

alert('outsideB'+b.value);

}

function change(){

var con=document.getElementById('container');

var a=document.getElementById('a');

var b=document.getElementById('b');

if(con.innerHTML==a.innerHTML){

con.innertHTML=b.innerHTML;

return;

}

con.innerHTML=a.innerHTML;

}

// --></mce:script>

<mce:script language="JavaScript" type="text/JavaScript"><!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; οnresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

// --></mce:script>

</head>

<body>

a<input type="text" id="Aname" name="Aname" οnclick="alert('AName='+this.value);alertAOutSide()"/>

</div>

b<input type="text" id="Bname" name="Bname" onClick="alert('BName='+this.value); alertBOutSide()"/>

</div>

</div>

<mce:script type="text/javascript"><!--

var con=document.getElementById('container');

var a=document.getElementById('a');

con.innerHTML=a.innerHTML;

// --></mce:script>

<br/>

<div>

</div>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"">

<html>

<head>

<title>在外部你取不到我的值</title>

<mce:script language="javascript" ><!--

function alertAOutSide(){

var a=document.getElementById('Aname');

alert('outsideA'+a.value);

}

function alertBOutSide(){

var b=document.getElementById('Bname');

alert('outsideB'+b.value);

}

function change(){

var con=document.getElementById('container');

var a=document.getElementById('a');

var b=document.getElementById('b');

if(con.innerHTML==a.innerHTML){

con.innertHTML=b.innerHTML;

return;

}

con.innerHTML=a.innerHTML;

}

// --></mce:script>

<mce:script language="JavaScript" type="text/JavaScript"><!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; οnresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

// --></mce:script>

</head>

<body>

a<input type="text" id="Aname" name="Aname" οnclick="alert('AName='+this.value);alertAOutSide()"/>

</div>

b<input type="text" id="Bname" name="Bname" onClick="alert('BName='+this.value); alertBOutSide()"/>

</div>

</div>

<mce:script type="text/javascript"><!--

var con=document.getElementById('container');

var a=document.getElementById('a');

con.innerHTML=a.innerHTML;

// --></mce:script>

<br/>

<div>

</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来控制。下面给出一种解决方法。

view plaincopy to clipboardprint?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"">

<html>

<head>

<mce:script language="javascript" ><!--

function alertAOutSide(){

var a=document.getElementById('Aname');

alert('outsideA'+a.value);

}

function alertBOutSide(){

var b=document.getElementById('Bname');

alert('outsideB'+b.value);

}

function change(){

var a=document.getElementById('a');

var b=document.getElementById('b');

if(a.style.display==""){

a.style.display="none";

b.style.display="";

return;

}

else{

b.style.display="none";

a.style.display="";

}

// --></mce:script>

<mce:script language="JavaScript" type="text/JavaScript"><!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; οnresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

// --></mce:script>

</head>

<body>

a<input type="text" id="Aname" name="Aname" οnclick="alert('AName='+this.value);alertAOutSide()"/>

</div>

b<input type="text" id="Bname" name="Bname" onClick="alert('BName='+this.value); alertBOutSide()"/>

</div>

<mce:script type="text/javascript"><!--

var a=document.getElementById('a');

a.style.display="";

// --></mce:script>

<br/>

<div>

</div>

</body>

</html>

本文来自CSDN博客，转载请标明出处：

转载地址：https://blog.csdn.net/id19870510/article/details/5302667 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：jQuery 选择器无法取值的时候

下一篇：自定义view 读取属性No resource identifier found for attribute

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章