标签：
我是沐晴，好久不见。马上要放假啦，也是比较的忙。 今天来谈谈表格和表单的基本知识。前期的写的都是比较基础的知识，后期会慢慢增加实例。一起来学习吧。
先看表格，DOM中提供了一些属性，便于我们获取表单节点：tBodies tHead tFoot rows(行) cells（列）（带S的都是获取的是一组元素）
var oTab = document.getElementById(‘tab‘); oTab.tBodies[0].rows[1].cells[0] //获取第二行的第一个
注意，写表格的时候最好加上tbody,你不加页面也会自动帮你加tbody 所以自己写的时候 最好加上。表格内容比较简单，下面直接看看表单
首先是表单节点的获取：所有表单节点的获取不仅可以通过 JS方法用 ID等获取，DOM给我们的提供了方法，可以直接通过name获取的，而且任何浏览器都支持的。（name属性在表单中是非常重要的，因为后端就是通过这个来识别属性，所以没有name,是无法提交数据的，一定要记得写。）如下：
var oForm = document.getElementById(‘form1‘); alert(oForm.text1.value); //1 <form id="form1"> <input type="text" name="text1" value="1">
</form>
注意：如果是一组元素，名字要一样，比如下面的单选框radio,这样选择男的时候 女就不会被选中，才能实现单选的效果。checkbox和radio是一样的。
var oForm = document.getElementById(‘form1‘); <form id="form1"> <input type="radio" name=‘sex‘ value="man">man <input type="radio" name=‘sex‘ value="woman">woman </form> //这个时候oForm.sex 获取的是一组元素，是一个类数组，oForm.sex[0] oForm.sex[1]，访问的时候也可以用循环。
下拉列表中，value指的是下面的列表中带有selected属性的值
alert(oForm.city.value);//上海 // 这里的值是下面的列表中带有selected属性的值 <select name="city" value=‘‘> <option value="">请选择城市</option> <option value="北京">北京</option> <option value="上海" selected>上海</option> </select>
然后来看看表单的一些常用事件：
onchange（当光标离开的时候相比原来 内容有变化的时候触发 ）在不同的表单以及浏览器中，存在区别，如下：
text : 当光标离开文本框的时候再去判断值是否发生了变化，如果发生了变化则触发onchange事件
radio /checkbox :标准浏览器下点击的时候，不管焦点是否离开，只要值相比原来发生改变就触发onchange事件。非标准下焦点离开的时候如果值变了才会触发。
select:只要选中某个元素和原来的不一样就会触发。
var oForm = document.getElementById(‘form1‘); oForm.text1.onchange = function(){ alert(this.value);//1 } for(var i =0;i<oForm.sex.length;i++){ oForm.sex[i].onchange = function(){ alert(this.value); } } oForm.city.onchange = function(){ alert(this.value);//上海 } <form id="form1"> <input type="text" name="text1" value="1"> <input type="radio" name=‘sex‘ value="man">man <input type="radio" name=‘sex‘ value="woman">woman <select name="city" value=‘‘> <option value="">请选择城市</option> <option value="北京">北京</option> <option value="上海" selected>上海</option> </select> </form>
onsubmit:当提交表单的时候触发。
例：用户未输入内容的时候不让提交。
oForm.onsubmit = function(){ if(this.text1.value == ‘‘){ alert(‘请输入内容‘); return false; //浏览器的默认行为是提交到指定地址，所以我们为空不让提交，就需要阻止默认行为 } }
DOM中还提供了一个提交方法：submit():提交表单
例：想在一段时间后，让表单自动提交
setTimeout(function(){
oForm.submit();
},1000)// 自动提交表单
onreset ： 当重置表单的时候触发。
例子：当点击了重置，提醒用户。
oForm.onreset = function(){ var re = confirm(‘你确定要重置吗‘);//当用户点击确定re为真 取消为假 return re; } // confirm 默认会弹出对话框让用户选择确定还是取消，它有一个返回值，确定为真 取消为假，并且只有用户做出选择之后才会指向后面的代码，所以把选择结果作为返回值，选择取消，就会阻止默认事件了
好啦，今天的知识点分享完毕啦。不见不散。
标签：
原文地址：http://www.cnblogs.com/moqing/p/5651861.html
