获取表单内部元素的N种方法

来源：互联网发布：陕西软件测试培训编辑：程序博客网时间：2024/06/07 05:33

今天讲讲获取表单元素的N种方法~

以上是部分资料参考的地方：http://blog.csdn.net/h12kjgj/article/details/61624509

先给出一个实例。

输入数字1~10，弹出输入的数字，并计算该数字的阶乘；如果输入的数字不在该范围内，则输出“balabala自己编的一些话”

源代码：

<html><head><title> </title><meta charset = 'utf-8'><script language="javascript">function Count(){var i,r,s=1;r=document.form1.textfield.value;if(r>=1&&r<=10){alert(r);for(i=1;i<=r;i++){s=s*i;}document.form1.textfield2.value=s;}elsealert("请输入1到10的数字");}</script></head><body><form name='form1'>  <label>  <div align="center">    <p><label>请输入一个小于10的正整数：      <input type="text" name="textfield">  </label>    </p>    <p><label>输入数据后，按此按钮可在下框中得到所输入数的阶乘：      <input type="button" value="显示结果" onClick="Count()">    </label>    </p>    <p>      <input type="text" name="textfield2" >    </p>  </div>  </label></form><p> </p></body></html>

1.利用id+form获取的方法

上面的例子就是用到的这个方法

r=document.form1.textfield.value;document.form1.textfield2.value=s;

注意：如果要获取一个div标签，比如<div id='head'></div>

就可以这样获取该div

2.利用查找函数的方法，如getElementById()方法

r=document.getElementById('textfield').valuedocument.getElementById('textfield2').value=s

注意：如果这里用id查找函数，那么相应的标签也要有id属性

还有其他查找方法，可以参考：http://blog.csdn.net/f156207495/article/details/78183740

3.利用forms方法

r=document.forms[0].textfield.valuedocument.forms[0].textfield2.value=s

forms方法：

forms可以获取当前文档的所有form项，获取了form项后我们提取出来第一个表单，然后再模仿第一种方法即可

4.利用elements方法

r=document.form1.elements[0].valuedocument.form1.elements[2].value=s

elements方法：

elements可以获取表单的所有标签

阅读全文

1 0