js 表格、表单、元素尺寸和位置

复习

• DOM : document object model
• DOM节点关系属性
  • childNodes 元素\注释\文本
  • children 元素
  • firstChild 第一个子节点
  • firstElementchild 第一个元素子节点
  • lastChild
  • lastElementChild
  • parentNode
  • offsetParent
  • previousSibling
  • previousElementSibling
  • nextSibling
  • nextElementSibling
• 节点增删改,复制
  • document.createElement(‘li‘);
  • parent.appendChild( newNode );
  • oldNode.parentNode.insertBefore(newNode,oldNode);
  • oldNode.parentNode.replaceChild(newNode,oldNode);
  • delNode.parentNode.removeChild(delNode);
  • delNode.remove();
  • Node.cloneNode(true);
• 获取元素方法
  • document.getElementById();
  • document.getElementsByTagName(‘div‘);
  • document.getElementsByClassName(‘red‘); //ie低版本不兼容
  • document.querySelector(‘ul li .red‘);
  • document.querySelectorAll(‘ul li .red‘); //[]

(一) 表格操作

• 获取表格
  • 通过id名或标签名 table
• 获取表头
  • 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()

(四) 元素的尺寸和位置

• 1-client系列
  • clientWidth //宽度+左右padding
  • clientHeight //高度+上下padding
  • clientTop //上边框宽度
  • clientLeft //左边框宽度
  • document.documentElement.clientWidth 可视区宽度
  • document.documentElement.clientHeight 可视区高度
• 2-offset系列
  • offsetWidth //宽度+左右padding + 左右border
  • offsetHeight //高度+上下padding + 上下border
  • offsetTop // 距离定位父级顶部的位移
  • offsetLeft // 距离定位父级左边的位移
• 3-scroll系列
  • scrollWidth //元素实际内容宽度
  • scrollHeight //元素实际内容高度
  • scrollTop //滚动的元素顶部卷去的高度
  • scrollLeft //滚动的元素左边卷去的宽度
• 4- 文档滚动高度的问题
• document.body body元素
• document.documentELement html元素
• 获取页面卷去高度,有兼容问题

      //获取页面卷去高度兼容写法
      var st = document.documentElement.scrollTop || document.body.scrollTop;  
  
      //兼容所有浏览器的页面滚动事件写法
          window.onscroll = function(){
              ...
          }
  

• 变量名不能使用top,top指向顶层对象(window)

原文地址：https://www.cnblogs.com/didamehulayou/p/11140085.html