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

Posted 2022-03-17 didamehulayou

复习

• 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)