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

Posted didamehulayou

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)

以上是关于js 表格表单元素尺寸和位置的主要内容,如果未能解决你的问题,请参考以下文章

如何用 JS 获取 SVG 内 path 元素中的图形的实际位置及尺寸

js怎么获取表格中指定行某一列的值

js学习笔记17----元素的各种位置,尺寸

js中尺寸类样式

js的意义,引用方法及变量

JS基础 空间坐标