DOM系統學習-表格、樣式和元素大小

操做表格

    屬性：

        caption    標題元素

        tHead    表頭元素

        tFoot    表尾元素

        tBodies    主體元素集合，經過下標取

        row    行元素集合，經過下標取

    方法：

        createCaption()

        createTHead()

        createTFoot()

        deleteCaption()

        deleteTHead()

        deleteTFoot()

        deleteRow(pos)

        insertRow(pos)

    tbody的屬性和方法：

        rows    行集合

        deleteRow(pos)    刪除第幾行

        insertRow(pos)    插入行到那個位置

    tr的屬性和方法：

        cells    單元格集合

        deleteCell(pos)    刪除單元格

        insertCell(pos)    插入單元格到那個位置

    注意：

        不支持td,tbody方法

操做樣式

    檢查dom2級css能力：

1	document.implementation.hasFeature( 'CSS2' , '2.0' );

    訪問元素的樣式：

        行內樣式：

            調用方式

                style.color，style.fontSize，style[font-size]

            屬性

                cssText    css文本內容

                length    樣式個數

            方法
                getPropertyPriority(name)    含有important則返回important

                getPropertyValue(name)    獲取屬性值

                setProperty(name,v,p)    設置屬性

                removeProperty(name)    移除屬性

        獲取計算後的樣式：

            IE不支持getComputedStyle

            IE支持currentStyle屬性

1	var  style = window.getComputedStyle ? window.getComputedStyle(table, null ) :  null  || table.currentStyle;

    操做樣式表：

        基本方式

            ele.id

            ele.className

        三個定義方法

            是否存在class

1 2 3 4

//判斷是否存在這個class function  hasClass(element, className) {      return  element.className.match( new  RegExp( '(\\s|^)'  + className +  '(\\s|$)' )); }

            添加class

1 2 3 4 5 6

//添加一個class，若是不存在的話    function  addClass(element, className) {      if  (!hasClass(element, className)) {          element.className +=  " "  + className;      } }

            刪除class

1 2 3 4 5 6

//刪除一個class，若是存在的話    function  removeClass(element, className) {      if  (hasClass(element, className)) {          element.className = element.className.replace( new  RegExp( '(\\s|^)'  + className +  '(\\s|$)' ),  ' ' );      } }

        HTMLLinkElement，HTMLStyleElement

1	var  link = document.getElementsByTagName( 'link' )[0];

        sheet屬性兼容

            非IE使用sheet

            IE使用styleSheet

1	var  sheet = link.sheet || link.styleSheet;

        css規則

            非IE    sheet.clssRules、sheet.deleteRule()、sheet.insertRule()

            IE    sheet.rules、sheet.removeRule()、sheet.addRule()

1 2 3 4 5 6 7 8 9

function  insertRule(sheet, selectorText, cssText, position) {      //若是是非IE         if  (sheet.insertRule) {          sheet.insertRule(selectorText +  "{"  + cssText +  "}" , position);          //若是是IE         }  else  if  (sheet.addRule) {          sheet.addRule(selectorText, cssText, position);      } }

1 2 3 4 5 6 7 8 9

function  deleteRule(sheet, index) {      //若是是非IE         if  (sheet.deleteRule) {          sheet.deleteRule(index);          //若是是IE         }  else  if  (sheet.removeRule) {          sheet.removeRule(index);      } }

獲取元素

    CSS大小：

        經過style內聯獲取元素大小

            ele.style.width、 ele.style.height

        經過計算元素大小

1	var  style = window.getComputedStyle ? window.getComputedStyle(table, null ) :  null  || table.currentStyle;

            sytle.width、style.height

        經過CSSStyleSheet

1 2	var  sheet = document.styleSheets[0];  //獲取link 或style var  rule = (sheet.cssRules || sheet.rules)[0];  //獲取第一條規則

            rule.style.width、rule.style.height

    實際大小：

        元素可視區大小    內容+內邊距

            ele.clientWidth、ele.clientHeight

        元素滾動內容大小    滾動條

            ele.scrollWidth、ele.scrollHeight

        元素實際大小    內容+內邊距+邊框+滾動條

            ele.offsetWidth、ele.offsetHeight

    周邊大小：

        邊框大小 不支持右下

            ele.clientLeft、ele.clientTop

        相對父元素的位置

            ele.offsetLeft、ele.offsetTop

        滾動條被隱藏的大小

    ​    ​    ​ele.scrollLeft、ele.scrollTop

 ​