dom操作表格和样式

1. 操作表格

var table = document.createElement("table");

table.width = 300;

table.border = 1;

caption = document.createElement("caption");

captionText = document.createTextNode("人员表");

caption.appendChild(captionText);

table.appendChild(caption);

thead = document.createElement('thead');

table.appendChild(thead);

tr= document.createElement('tr');

thead .appendChild(tr);

th= document.createElement('th');

th.appendChild(document.createTextNode("数据"));

tr.appendChild(th);

document.body.appendChild(table);

var table = document.getElementsByTagName("table")[0];

table.caption.innerHTML;  //获取表格caption

table.tHead; //获取表格thead

table.tFoot; //获取表格tfoot

table.tBodies //获取表格body集合

table.rows; //获取表格行集合，包含所有tr。

table.tBodies[0].rows; //获取表格主体部分行集合

table.rows[0].cells; //获取表格第一行所有单元格

table.deleteCaption(); //删除caption

table.deleteTHead(); //删除thead

table.tBodies[0].deleteRow(0);   //删除第一个行

thead = table.createTHead();

tr = thead.insertRow(0);

td = tr.insertCell(0);

2. 操作样式

检查浏览器支持程度

window.implementation.hasFeature("css", "2.0"); 

window.implementation.hasFeature("html", "1.0");   //IE浏览器对hasFeature支持不好，不支持检查css支持的版本

var box = document.getElementById("box");

box.style.color;  //行内style color

box.style.fontSize;  //对font-size中间有-的，转换为下个单词大写

box.style.cssFloat; //非IE浏览器float

box.style.styleFloat; //IE浏览器float

box.style.setProperty("color", "red");

box.style.removeProperty("color");   //IE浏览器不支持

box.style.cssText;  //获取行内css

var style = window.getComputedStyle(box, null);  //获取计算过的样式，第二个参数可以为null, ":hover", ":link"等, IE浏览器不支持

var style = box.currentStyle; //IE浏览器获取计算过的样式

类似border这样的复合属性，计算过的样式就不存在了，分成单独的属性了。

3. class/id属性更改样式

var box = window.getElementById("box");

box.id = "new-css";  //通过更改id来改变css样式

var box = window.getElementById("box");

box.className = "new-css";  //通过更改class来改变css样式

4. link和style标签

doucument.implementation.hasFeature("styleSheets",'2.0');  //查看是否支持stylesheet2.0，但是IE返回不正确

var links = document.getElementsByTagName("link");  //

links[0].sheet;//非IE浏览器sheet

links[0].styleSheet; //IE浏览器使用这个属性访问sheet

document.styleSheets; //所有浏览器都支持

var sheet = doucument.styleSheets[0];

sheet.disabled=true;  //禁用样式表

sheet.href;   //样式表链接地址

sheet.cssRules; //非IE浏览器获取css rules

sheet.rules; //IE浏览器获取css rules

sheet.cssRules[0].cssText;   //获取css rule文本

sheet.cssRules[0].selectorText; //获取css选择器

sheet.deleteRule(0); //非IE浏览器删除规则

sheet.removeRule(0);   //IE浏览器删除规则

sheet.insertRule("body {background-color: red;}",  0);   //非IE浏览器插入css规则

sheet.addRule("body", "background-color:red;", 0); //IE浏览器插入css规则

5. dom尺寸和位置

var style = window.getComputedStyle(box, null);  //计算过的样式，IE浏览器对于没有设置过的width，返回auto，非IE浏览器返回实际值

var box = window.getElementById("box");

box.clientWidth;

box.clientHeight;  //元素实际大小，单位为px, 大小等于content width or content height + padding width or padding height - scoll bar width or scroll bar height

box.scrollWidth;   //滚动内容大小， 非IE浏览器获取实际高度，IE浏览器返回有效内容高度，增加border不同浏览器有的算进去，有的不算。

box.scrollHeight;  //如果内容溢出，不加滚动条，有的浏览器不计算溢出内容宽高，有的计算

box.offsetWidth;   //包括边框，内边距宽高

box.offsetHeight;

box.clientTop;

box.clientLeft;   //获取边框大小

box.offsetTop;

box.offsetLeft; //相对于父元素的位置，外边距会增加位置

box.offsetParent;  //获取父元素

box.scrollTop;

box.scrollLeft;  //获取滚动的位置

box.getBoundingClientRect(); //也可以获取元素位置