DOM之表格与表单基础分享

        我是沐晴，好久不见。马上要放假啦，也是比较的忙。 今天来谈谈表格和表单的基本知识。前期的写的都是比较基础的知识，后期会慢慢增加实例。一起来学习吧。

   先看表格，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 默认会弹出对话框让用户选择确定还是取消，它有一个返回值，确定为真 取消为假，并且只有用户做出选择之后才会指向后面的代码，所以把选择结果作为返回值，选择取消，就会阻止默认事件了

 

好啦，今天的知识点分享完毕啦。不见不散。