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

 ​