DOM 在操作生成HTML 上,还是比较简明的。不过,由于浏览器总是存在兼容和陷阱,
导致最终的操作就不是那么简单方便了。本章主要了解一下DOM 操作表格和样式的一些知
识。


一.操作表格

标签是HTML 中结构最为复杂的一个,我们可以通过DOM 来创建生成它,或
者HTML DOM 来操作它。(PS:HTML DOM 提供了更加方便快捷的方式来操作HTML,有
手册)。

   
   
   
   
  1. //需要操作的table 
  2. <table border="1" width="300"> 
  3. <caption>人员表caption> 
  4. <thead> 
  5. <tr> 
  6. <th>姓名th> 
  7. <th>性别th> 
  8. <th>年龄th> 
  9. tr> 
  10. thead> 
  11. <tbody> 
  12. <tr> 
  13. <td>张三td> 
  14. <td>td> 
  15. <td>20td> 
  16. tr> 
  17. <tr> 
  18. <td>李四td> 
  19. <td>td> 
  20. <td>22td> 
  21. tr> 
  22. tbody> 
  23. <tfoot> 
  24. <tr> 
  25. <td colspan="3">合计:Ntd> 
  26. tr> 
  27. tfoot> 
  28. table> 
   
   
   
   
  1. //使用DOM 来创建这个表格 
  2. var table = document.createElement('table'); 
  3. table.border = 1; 
  4. table.width = 300; 
  5. var caption = document.createElement('caption'); 
  6. table.appendChild(caption); 
  7. caption.appendChild(document.createTextNode('人员表')); 
  8. var thead = document.createElement('thead'); 
  9. table.appendChild(thead); 
  10. var tr = document.createElement('tr'); 
  11. thead.appendChild(tr); 
  12. var th1 = document.createElement('th'); 
  13. var th2 = document.createElement('th'); 
  14. var th3 = document.createElement('th'); 
  15. tr.appendChild(th1); 
  16. th1.appendChild(document.createTextNode('姓名')); 
  17. tr.appendChild(th2); 
  18. th2.appendChild(document.createTextNode('年龄')); 
  19. document.body.appendChild(table); 

PS:使用DOM 来创建表格其实已经没有什么难度,就是有点儿小烦而已。下面我们再
使用HTML DOM 来获取和创建这个相同的表格。

JavaScript的DOM操作表格及样式_第1张图片

JavaScript的DOM操作表格及样式_第2张图片

PS:因为表格较为繁杂,层次也多,在使用之前所学习的DOM 只是来获取某个元素会
非常难受,所以使用HTML DOM 会清晰很多。

   
   
   
   
  1. //使用HTML DOM 来获取表格元素 
  2. var table = document.getElementsByTagName('table')[0]; //获取table 引用 
  3. //按照之前的DOM 节点方法获取
 
  • alert(table.tHead); //获取表头 
  • alert(table.tFoot); //获取表尾 
  • //按HTML DOM 来获取表体
  •  
  • alert(table.tBodies); //获取表体的集合 
  • PS:在一个表格中

    和是唯一的,只能有一个。而不是唯一的可以
    有多个,这样导致最后返回的和是元素引用,而返回的是元素集合。

       
       
       
       
    1. //按HTML DOM 来获取表格的行数 
    2. alert(table.rows.length); //获取行数的集合,数量 
    3. //按HTML DOM 来获取表格主体里的行数 
    4. alert(table.tBodies[0].rows.length); //获取主体的行数的集合,数量 
    5. //按HTML DOM 来获取表格主体内第一行的单元格数量(tr) 
    6. alert(table.tBodies[0].rows[0].cells.length); //获取第一行单元格的数量 
    7. //按HTML DOM 来获取表格主体内第一行第一个单元格的内容(td) 
    8. alert(table.tBodies[0].rows[0].cells[0].innerHTML); //获取第一行第一个单元格的内容 
    9. //按HTML DOM 来删除标题、表头、表尾、行、单元格 
    10. table.deleteCaption(); //删除标题 
    11. table.deleteTHead(); //删除
     
  • table.tBodies[0].deleteRow(0); //删除
  • 一行 
  • table.tBodies[0].rows[0].deleteCell(0); //删除
  •  
  • alert(table.children[0].innerHTML); //获取caption 的内容 
  • PS:这里使用了children[0]本身就忽略了空白,如果使用firstChild 或者childNodes[0]
    需要更多的代码。

       
       
       
       
    1. //按HTML DOM 来获取表格的
     
  • alert(table.caption.innerHTML); //获取caption 的内容 
  • //按HTML DOM 来获取表头表尾
  • 一个单元格 
  • //按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:在创建表格的时候

    、、
    没有特定的方法,需要使用document
    来创建。也可以模拟已有的方法编写特定的函数即可,例如:insertTH()之类的。


    二.操作样式
    CSS 作为(X)HTML 的辅助,可以增强页面的显示效果。但不是每个浏览器都能支持最
    新的CSS 能力。CSS 的能力和DOM 级别密切相关,所以我们有必要检测当前浏览器支持
    CSS 能力的级别。
    DOM1 级实现了最基本的文档处理,DOM2 和DOM3 在这个基础上增加了更多的交互
    能力,这里我们主要探讨CSS,DOM2 增加了CSS 编程访问方式和改变CSS 样式信息。

    JavaScript的DOM操作表格及样式_第3张图片

       
       
       
       
    1. //检测浏览器是否支持DOM1 级CSS 能力或DOM2 级CSS 能力 
    2. alert('DOM1 级CSS 能力:' + document.implementation.hasFeature('CSS''2.0')); 
    3. alert('DOM2 级CSS 能力:' + document.implementation.hasFeature('CSS2''2.0')); 

    PS:这种检测方案在IE 浏览器上不精确,IE6 中,hasFeature()方法只为HTML 和版本
    1.0 返回true,其他所有功能均返回false。但IE 浏览器还是支持最常用的CSS2 模块。
    1.访问元素的样式
    任何HTML 元素标签都会有一个通用的属性:style。它会返回CSSStypeDeclaration 对
    象。下面我们看几个最常见的行内style 样式的访问方式。

    JavaScript的DOM操作表格及样式_第4张图片

       
       
       
       
    1. var box = document.getElementById('box'); //获取box 
    2. box.style.cssFloat.style; //CSSStyleDeclaration 
    3. box.style.cssFloat.style.color; //red 
    4. box.style.cssFloat.style.fontSize; //20px 
    5. box.style.cssFloat || box.style.styleFloat; //left,非IE 用cssFloat,IE 用styleFloat 

    PS:以上取值方式也可以赋值,最后一种赋值可以如下:

       
       
       
       
    1. typeof box.style.cssFloat != 'undefined' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right'

     

    JavaScript的DOM操作表格及样式_第5张图片

       
       
       
       
    1. box.style.cssText; //获取CSS 代码 
    2. //box.style.length; //3,IE 不支持 
    3. //box.style.removeProperty('color'); //移除某个CSS 属性,IE 不支持 
    4. //box.style.setProperty('color','blue'); //设置某个CSS 属性,IE 不支持 

    PS:Firefox、Safari、Opera9+、Chrome 支持这些属性和方法。IE 只支持cssText,而
    getPropertyCSSValue()方法只有Safari3+和Chrome 支持。
    PS:style 属性仅仅只能获取行内的CSS 样式,对于另外两种形式内联