DOM其实是一套操作XML文档的标准，不同语言都有实现。前面也提到，HTML有特有的DOM，HTML DOM主要是为了简化一些常用的操作。

        1.直接访问HTML元素的属性

        HTML元素具有各种各样的属性，如果按照DOM的方式来访问这些属性，则需要采用setAttribute()和getAttribute()方法。而HTML DOM简化了这个操作，可以直接通过.操作符直接访问这些属性。

        假设网页中有一个img元素，，我们已经获取了该元素的DOM对象oImg，如果需要操作其src或者border属性，我们之前讲过，需要写下列代码：

 

   
   
   
   
    
    
    
    
    
  1. alert(oImg.getAttribute("src")); 
    2. 
    
    
    
    
  2. alert(oImg.getAttribute("border")); 
    3. 
    
    
    
    
  3. oImg.setAttribute("src","newImg.jpg"); 
    4. 
    
    
    
    
  4. oImg.setAttribute("border","2"); 
    5.

        有了HTML DOM ，上面的代码可以写成：

 

   
   
   
   
    
    
    
    
    
  1. alert(oImg.src); 
    2. 
    
    
    
    
  2. alert(oImg.border); 
    3. 
    
    
    
    
  3. oImg.src = "newImg.jpg"; 
    4. 
    
    
    
    
  4. oImg.border = "2"; 
    5.

        基本上所有HTML元素的特性对应的属性都是一样的，只有下面的例外：

 

   
   
   
   
    
    
    
    
    
  1. <div class="myCls">div> 
    2.

        对于上面的div中的class特性，在使用HTML DOM操作的时候，就必须写成：

 

   
   
   
   
    
    
    
    
    
  1. alert(oDiv.className); 
    2. 
    
    
    
    
  2. oDiv.className = "newCls"; 
    3.

        2. HTML DOM处理表格的方法

        HTML的DOM给

等元素添加了一些特性和方法，如下面几个表所示：

        (1)给table添加的部分：

 

元素的集合元素集合元素集合元素并且放入表格元素并且放入表格元素元素
caption 指向
元素（如果存在）
tBodies
tFoot
tHead
rows 表格中所有行的集合
createTHead() 创建
createTFoot() 创建
createCaption() 创建
元素并且放入表格
deleteTHead() 删除
deleteTFoot() 删除
deleteCaption() 删除
元素
deleteRow(pos) 删除指定位置的行
insertRow(pos) 在指定位置插入行

 

         (2)元素添加了以下内容：

 

中所有行的集合
rows
deleteRow(pos) 删除指定位置的行
insertRow(pos) 在指定位置插入行

         (3)中添加的内容：

 

cells 元素中所有单元格的集合
deleteCell(pos) 删除制定位置单元格
insertCell(pos) 指定位置插入单元格

 

        下面，使用HTML DOM写一个完整的添加表格的例子：


   
   
   
   
    
    
    
    
    
  1. <html> 
    2. 
    
    
    
    
  2.     <head> 
    3. 
    
    
    
    
  3.         <title>title> 
    4. 
    
    
    
    
  4.         <script type="text/javascript"> 
    5. 
    
    
    
    
  5.             function createTableUsingHtmlDOM() { 
    6. 
    
    
    
    
  6.                 //创建表格 
    7. 
    
    
    
    
  7.                 var oTbl = document.createElement("table"); 
    8. 
    
    
    
    
  8.                 oTbl.setAttribute("border","1"); 
    9. 
    
    
    
    
  9.                 oTbl.setAttribute("width","800"); 
    10. 
    
    
    
    
  10.                  
    11. 
    
    
    
    
  11.                 //插入一行 
    12. 
    
    
    
    
  12.                 oTbl.insertRow(0); 
    13. 
    
    
    
    
  13.                 //插入一列 
    14. 
    
    
    
    
  14.                 oTbl.rows[0].insertCell(0); 
    15. 
    
    
    
    
  15.                 //给列加入文本内容 
    16. 
    
    
    
    
  16.                 oTbl.rows[0].cells[0].appendChild(document.createTextNode("单元格11")); 
    17. 
    
    
    
    
  17.                 //插入一列 
    18. 
    
    
    
    
  18.                 oTbl.rows[0].insertCell(1); 
    19. 
    
    
    
    
  19.                 //给列加入文本内容 
    20. 
    
    
    
    
  20.                 oTbl.rows[0].cells[1].appendChild(document.createTextNode("单元格12")); 
    21. 
    
    
    
    
  21.  
    22. 
    
    
    
    
  22.                 //插入一行 
    23. 
    
    
    
    
  23.                 oTbl.insertRow(1); 
    24. 
    
    
    
    
  24.                 //插入一列 
    25. 
    
    
    
    
  25.                 oTbl.rows[1].insertCell(0); 
    26. 
    
    
    
    
  26.                 //给列加入文本内容 
    27. 
    
    
    
    
  27.                 oTbl.rows[1].cells[0].appendChild(document.createTextNode("单元格21")); 
    28. 
    
    
    
    
  28.                 //插入一列 
    29. 
    
    
    
    
  29.                 oTbl.rows[1].insertCell(1); 
    30. 
    
    
    
    
  30.                 //给列加入文本内容 
    31. 
    
    
    
    
  31.                 oTbl.rows[1].cells[1].appendChild(document.createTextNode("单元格22")); 
    32. 
    
    
    
    
  32.  
    33. 
    
    
    
    
  33.                 //别忘了把表格加到<body/>里面去 
    34. 
    
    
    
    
  34.                 document.body.appendChild(oTbl); 
    35. 
    
    
    
    
  35.             } 
    36. 
    
    
    
    
  36.         script> 
    37. 
    
    
    
    
  37.     head> 
    38. 
    
    
    
    
  38.     <body> 
    39. 
    
    
    
    
  39.         <input type="button" value="添加表格" onclick="createTableUsingHtmlDOM()"> 
    40. 
    
    
    
    
  40.     body> 
    41. 
    
    
    
    
  41. html> 
    42.

        至此，JavaScript DOM最基础的部分就学习完了。DOM还有很多很多其他的特性，在后续的学习中，如果接触到了，我会另外开一个小系列专门记录。

 

参考书目：

《JavaScript高级程序设计》