javascript基础：DOM3操作表格和样式

一、dom操作表格

//使用 DOM 来创建这个表格
var table = document.createElement('table');
table.border = 1;
table.width = 300;

var caption = document.createElement('caption');
table.appendChild(caption);
caption.appendChild(document.createTextNode('人员表'));

var thead = document.createElement('thead');
table.appendChild(thead);

var tr = document.createElement('tr');
thead.appendChild(tr);

var th1 = document.createElement('th');
var th2 = document.createElement('th'); var th3 = document.createElement('th');
tr.appendChild(th1);
th1.appendChild(document.createTextNode('姓名'));
tr.appendChild(th2);
th2.appendChild(document.createTextNode('年龄'));

document.body.appendChild(table);

二、使用HTML DOM来操作表格

1、获取表格内容

//按 HTML DOM 来获取表格的<caption>的内容
alert(table.caption.innerHTML);
//按 HTML DOM 来获取表头表尾<thead> <tfoot>
alert(table.tHead);//返回的是一个对象
alert(table.tFoot);//返回的是一个对象
//按 HTML DOM 来获取表体<tbody>
alert(table.tBodies);//返回的是一个集合
//按 HTML DOM 来获取表格的行数
alert(table.rows.length);
//按 HTML DOM 来获取表格主体里的行数
alert(table.tBodies[0].rows.length);
//按 HTML DOM 来获取表格主体内第一行的
alert(table.tBodies[0].rows[0].cells.length);
//按 HTML DOM 来获取表格主体内第一行第一个单元格的内容
alert(table.tBodies[0].rows[0].cells[0].innerHTML);
//PS:在一个表格中<thead>和<tfoot>是唯一的,只能有一个。这样导致最后返回的<thead>和<tfoot>是元素引用.
// <tbody>不是唯一的可以 有多个,<tbody>返回的是元素集合。

2、删除表格内容

//按 HTML DOM 来删除标题、表头、表尾、行、单元格
table.deleteCaption();
table.deleteTHead();
table.tBodies[0].deleteRow(0);
table.tBodies[0].rows[0].deleteCell(0);

3、创建表格

//按 HTML DOM 创建一个表格
var table = document.createElement('table');
table.border = 1;
table.width = 300;
table.createCaption().innerHTML = '人员表';
//table.createTHead();//推荐使用这种方法
// table.tHead.insertRow(0);//不推荐使用这种方法，容易混淆。
var thead = table.createTHead();
var tr = thead.insertRow(0);

var td = tr.insertCell(0);
td.appendChild(document.createTextNode('数据'));
var td2 = tr.insertCell(1);
td2.appendChild(document.createTextNode('数据 2'));
document.body.appendChild(table);
//PS:在创建表格的时候<table>、<tbody>、<th>没有特定的方法,需要使用 document 来创建。
// 也可以模拟已有的方法编写特定的函数即可,例如:insertTH()之类的。

三、样式操作

1、获取样式

//style属性只能获得行内样式，内联和链接样式是获取不到的。
function getStyle(){
    //获取节点对象
    var box = document.getElementById('box');
    //获取属性对象
    var styleObj = box.style;
    //获取各种属性
    var color = styleObj.color;//获取字体颜色
    var bgColor = styleObj.background;//获取背景颜色
    var font = styleObj.fontSize;//获取字体大小 不能使用font-size.凡是带-都需要去掉后将字母大写：fontSize
    var float = styleObj.float;//获取浮动样式
    var cssStyle = styleObj.cssText;//获取css的样式文本
    alert(color  + font + float + bgColor);
    alert(cssStyle);
}

2、设置样式

function setStyle(){
    //获取节点对象
    var box = document.getElementById('box');
    //获取属性对象
    var styleObj = box.style;
    //给属性赋值
    styleObj.color = 'green';
    styleObj.background = 'red';
    styleObj.fontSize = '16px';
    styleObj.float = 'left';
}

3、计算样式

//计算过的样式
//计算过的样式对象是可以获得行内、内联和链接样式的，因为不管任何样式最后都是要驻留在计算机内的。
//需要注意的是符合样式最后是无法驻留在计算机内的比如border属性。
function getComStyle(){
    var box = document.getElementById('box');
    //获取计算后的样式对象
    //计算后的样式对象是包括默认或设置过的样式，若样式没有设置就显示默认的。
    var comStyle = getComputedStyle(box);//非IE浏览器支持
    //var comSyleIe = box.currentStyle;//IE浏览器不支持getComputedStyle方法，用这个代替
    //做兼容处理
    //var comStyle1 =  box.getComputedStyle ? comStyle:null || box.currentStyle;

    //获取计算后的属性
    var color = comStyle.color;
    var bgColor = comStyle.background;
    var fontSize = comStyle.fontSize;
    var float = comStyle.float;
    alert(color + fontSize + float + bgColor);