當innerHTML遇上document getElementById
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
不知在通常的開發中，大家有沒有遇到過這樣的問題。
例如現在有一個控制元件view plaincopy to clipboardprint?
<input type="text" id="name" name="name"/>
<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"
"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" ><!--
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; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// --></mce:script>
</head>
<body>
<div id="a" style="display:none " mce_style="display:none ">
a<input type="text" id="Aname" name="Aname" onclick="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"><!--
var con=document.getElementById('container');
var a=document.getElementById('a');
con.innerHTML=a.innerHTML;
// --></mce:script>
<br/>
<div>
<input name="button" type="button" id="change" onClick="change()" value="更換內容">
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// --></mce:script>
</head>
<body>
<div id="a" style="display:none " mce_style="display:none ">
a<input type="text" id="Aname" name="Aname" onclick="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"><!--
var con=document.getElementById('container');
var a=document.getElementById('a');
con.innerHTML=a.innerHTML;
// --></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" onclick="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"
"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" ><!--
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; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// --></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" onclick="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"><!--
var a=document.getElementById('a');
a.style.display="";
// --></mce:script>
<br/>
<div>
<input name="button" type="button" id="change" onClick="change()" value="更換內容">
</div>
</body>
</html>
本文來自CSDN部落格，轉載請標明出處：http://blog.csdn.net/SoS1437/archive/2009/05/02/4142785.aspx
給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow
