獲得網頁控制項方法大全(附全碼)

獲得網頁控制項方法大全(附全碼)_AX

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

編寫JS的時候,總會調用的網頁上的控制項,今天有心情,把獲得網頁上的控制項方法寫了下,有不足,請補充.
【總結】一般我喜歡使用:document.getElementById()和document.all().現在覺得document.all.*比較不錯!
關於其更深一步的原理暫不清楚,希望有明白的人給個深入講解的連結!!

本帖以獲得頁面的text文本為例,獲得控制項後為其賦值為"你好!"
【附一:方法大全】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>獲得網頁控制項的方法大全</title>
<script language="javascript">
function AXzhz()
{
  //【AX為文字框的id,通過下面的方法對文字框賦內容】

  //【根據控制項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="你好!";

  //【根據控制項name,返回的是一個數組集合,再通過下標獲得控制項】
  //document.getElementsByName("textfield")[0].value="你好!";
  //不成功 formid.all.getElementsByName("textfield")[0].value="你好!";
  //不成功 formid.getElementsByName("textfield")[0].value="你好!";

  //【根據標籤,返回的是一個數組集合,嚴格來說是獲得標籤中的內容,估計用到的機會不是很多】
  //document.getElementsByTagName("td")[1].innerHTML="你好!";
}
</script>
</head>
<body>
<form id="formid">
<table width="200" border="1">

<tr title="快啊快啊!!" onclick="AXzhz()">
    <td bgcolor="#FF9933">你點我啊!!<br>
<INPUT TYPE="text"value="根據標籤測試時使用,請仔細觀察結果!">
</td>
</tr>
<tr>
    <td bgcolor="#0099FF"><p>AXzhz製作<br/>
        <input type="text" name="textfield" value="我要給這個文字框賦值!" id="AX"/>
    </td></p>
</tr>
</table>
</form>
</body>
</html>

【附二:getElementsByName詳細】
<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詳細】
<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()">你點我啊!</label><br>
<SPAN>Immediate Child
<DIV>
<SPAN>Child of Child DIV
<INPUT TYPE="text" NAME="firstName" value="AX製作!">
</SPAN>
</DIV>
</SPAN>
</DIV>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

獲得網頁控制項方法大全(附全碼)_AX

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support