編寫(xiě)JS的時(shí)候,總會(huì)調(diào)用的網(wǎng)頁(yè)上的控件,今天有心情,把獲得網(wǎng)頁(yè)上的控件方法寫(xiě)了下,有不足,請(qǐng)補(bǔ)充.
【總結(jié)】一般我喜歡使用:document.getElementById()和document.all().現(xiàn)在覺(jué)得document.all.*比較不錯(cuò)!
關(guān)于其更深一步的原理暫不清楚,希望有明白的人給個(gè)深入講解的鏈接!!
本帖以獲得頁(yè)面的text文本為例,獲得控件后為其賦值為"你好!"
【附一:方法大全】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>獲得網(wǎng)頁(yè)控件的方法大全</title>
<script language="javascript">
?function AXzhz()
?{??
??//【AX為文本框的id,通過(guò)下面的方法對(duì)文本框賦內(nèi)容】
??
??//【根據(jù)控件ID】
??document.getElementById("AX").value="你好!"?;
??//document.all("AX").value="你好!";??
??//document.all.AX.value="你好!";
??//不成功 document.AX.value="你好!";
??
??//document.body.all("AX").value="你好!";
??//document.body.all.AX.value="你好!";
??//不成功 document.body.getElementById("AX").value="你好!";
??
??//formid.AX.value="你好!";??
??//不成功 formid.getElementById("AX").value="你好!";
??//不成功 formid.all.getElementById("AX").value="你好!";
??//formid.all.AX.value="你好!";
??//formid.all("AX").value="你好!";
??
??//【根據(jù)控件name,返回的是一個(gè)數(shù)組集合,再通過(guò)下標(biāo)獲得控件】
??//document.getElementsByName("textfield")[0].value="你好!";
??//不成功 formid.all.getElementsByName("textfield")[0].value="你好!";
??//不成功 formid.getElementsByName("textfield")[0].value="你好!";
??
??//【根據(jù)標(biāo)簽,返回的是一個(gè)數(shù)組集合,嚴(yán)格來(lái)說(shuō)是獲得標(biāo)簽中的內(nèi)容,估計(jì)用到的機(jī)會(huì)不是很多】??
??//document.getElementsByTagName("td")[1].innerHTML="你好!";????
?}
</script>
</head>
<body>
<form id="formid">
<table width="200" border="1">
<!--title是鼠標(biāo)在上面的時(shí)候出現(xiàn)的提示-->
? <tr title="快啊快啊!!" onclick="AXzhz()">
??? <td bgcolor="#FF9933">你點(diǎn)我啊!!<br>?
?<INPUT TYPE="text"value="根據(jù)標(biāo)簽測(cè)試時(shí)使用,請(qǐng)仔細(xì)觀察結(jié)果!">
?</td>???
? </tr>
? <tr>
??? <td? bgcolor="#0099FF"><p>AXzhz制作<br/>
??????? <input type="text" name="textfield" value="我要給這個(gè)文本框賦值!" id="AX"/>??
??? </td></p>
? </tr>
</table>
</form>
</body>
</html>
【附二:getElementsByName詳細(xì)】
<SCRIPT>
function fnGetNames(){
// Returns a collection with 2 INPUT type=text elements.
var aInput=document.getElementsByName("firstName");
document.all.AX.value=aInput[0].value+aInput[1].value;
}
</SCRIPT>
<INPUT TYPE="text"? id="AX">
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="text" NAME="firstName">
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetNames()">
【附三:getElementsByTagName詳細(xì)】
<SCRIPT>
function AXzhz()
{
var aSpans = oDiv.getElementsByTagName("SPAN");
document.all.AX.value=aSpans[1].innerHTML;
}
</SCRIPT>
<input name="text" type="text"? id="AX" width="400px">
<DIV id="oDiv"><label onClick="AXzhz()">你點(diǎn)我啊!</label><br>
<SPAN>Immediate Child
<DIV>
<SPAN>Child of Child DIV
<INPUT TYPE="text" NAME="firstName" value="AX制作!">
</SPAN>
</DIV>
</SPAN>
</DIV>
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1346316