JavaScript表格、表单

表格操作——table

• 获取表格——通过标签或者id获取
• 获取表头——table.tHead
• 获取表格主题——table.tBodies --> [tbody,tbody]
• 获取表格底部—— table.tFoot
• 获取表格行——
  - table.tHead.rows --> [tr,tr]
  - table.tBodies[0].rows --> [tr,tr]
  - table.tFoot.rows --> [tr,tr]
• 获取单元格——
  - table.tHead.rows[0].cells --> [th,th]
  - table.tBodies[0].rows[0].cells --> [td,td]
  - table.tFoot.rows[0].cells --> [td,td]

表格的属性操作：

• getAttribute(attr) 获取标签属性(内置,自定义)
• setAttribute(attr,val) 设置标签属性(内置,自定义),自定义属性会显示在标签上
• * 以上两种方式通常用来操作自定属性
• ele.attr 通常用来设置内属性,也可以设置自定义属性,这种方式设置的自定义属性不会显示在标签上

 

表单操作：

获取表单元素——form.name

        <form action="" id="form1">
            <input type="text" name="user">
            <input type="text" name="pass">
            <input type="radio" name="sex">
            <input type="radio" name="sex">
        </form>

        js:
            var form1 = document.getElementById('form1');
            console.log(form1.user);  // input
            console.log(form1.pass);  //input
            console.log(form1.sex);   //[input,input]

输入框的事件及方法

• 获得焦点事件——onfocus
• 失去焦点事件——onblur
• 获得焦点方法——focus（）
• 失去焦点方法——blur（）

表单域事件及方法

• 表单提交事件——onsubmit

              form.onsubmit = function(){
                  return false; //阻止表单提交
              }

• 表单重置事件——onreset

              form.onreset = function(){
                  return false; //阻止表单重置
              }

• 表单提交方法——submit（）
• 表单重置方法——reset（）

 

元素的尺寸和位置

client系列

• clientWidth——宽度＋左右padding
• document.documentElement.clientWidth 可视区宽度
• clientHeight——高度＋上下padding
• document.documentElement.clientHeight 可视区高度
• clientTop——上边框的宽度
• clientLeft //左边框宽度

offset系列

• offsetWidth——宽度＋左右padding＋左右border
• offsetHeight ——高度+上下padding + 上下border
• offsetTop —— 距离定位父级顶部的位移
• offsetLeft —— 距离定位父级左边的位移

 

scroll系列

• scrollWidth——元素实际内容宽度
• scrollHeight //元素实际内容高度
• scrollTop //滚动的元素顶部卷去的高度
• scrollLeft //滚动的元素左边卷去的宽度

 

页面卷去高度的兼容问题：

         //获取页面卷去高度兼容写法
            var st = document.documentElement.scrollTop || document.body.scrollTop;  

         //兼容所有浏览器的页面滚动事件写法
                window.onscroll = function(){
                    ...
                }