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

 
​