js table, form, size and position of the elements

review

• DOM : document object model

• DOM node property relations

  • childNodes elements \ Notes \ text

  • children elements

  • firstChild The first child node

  • The first child element node firstElementchild

  • lastChild

  • child element of the Child

  • parentNode

  • offsetParent

  • previousSibling

  • previousElementSibling

  • nextSibling

  • nextElementSibling

• Node additions and deletions, replication

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

• Gets the element method

  • document.getElementById();
  • document.getElementsByTagName('div');
  • document.getElementsByClassName ( 'red'); // ie low version is not compatible
  • document.querySelector('ul li .red');
  • document.querySelectorAll('ul li .red'); //[]

(A) operating table

• Acquisition Table

  • By id name or label name table

• Gets the header

  • table.tHead

• Get a table body

  • table.tBodies --> [tbody,tbody]

• Get the bottom of the table

  • table.tFoot

• Table row

  • table.tHead.rows --> [tr,tr]
  • table.tBodies[0].rows --> [tr,tr]
  • table.tFoot.rows --> [tr,tr]

• Get a cell

  • table.tHead.rows[0].cells --> [th,th]
  • table.tBodies[0].rows[0].cells --> [td,td]
  • table.tFoot.rows[0].cells --> [td,td]

(B) operating properties

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

(C) Form

• Gets the attribute value element can 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]
  

• Input box events and methods

  • Get focus event
    • onfocus
  • Event loses focus
    • onblur
  • Get the focus method
    • focus()
  • Lose focus method
    • blur()

• Form field events and methods

  • A form is submitted
    • onsubmit

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

  • Form reset event
    • onreset

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

  • Form submission method
    • submit()
  • Form reset method
    • reset()

Size and position (D) element

• 1-client series

  • clientWidth // padding width about +

  • clientHeight // height + padding down

  • clientTop // the width of border

  • clientLeft // the width of the left border

  • document.documentElement.clientWidth visible region width

  • document.documentElement.clientHeight highly visible area

• 2-offset series

  • offsetWidth // padding about + width + left border
  • offsetHeight // height + padding + up and down up and down border
  • Displacement distance of the top of the positioning offsetTop // Parent
  • offsetLeft // displacement from the positioning of the parent left

• 3-scroll series

  • scrollWidth // element of the actual content width
  • scrollHeight // actual content of the element height
  • scrollTop // rolling element to the height of the top roll
  • scrollLeft // rolling elements left to the width of the roll

• 4- document scrolls height issue

• document.body body element

• document.documentELement html元素

• Page volume to get the height, there are compatibility issues

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

• Variable names can not use the top, top point to top-level object (window)