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

 
​