JavaScript DOM学习笔记6——HTML DOM

于 2011-12-17 16:08:00 发布
阅读量61 收藏
点赞数
文章标签： javascript ViewUI
本文介绍了HTMLDOM的基本概念及其如何简化HTML元素属性的访问。同时详细讲解了利用HTMLDOM进行表格操作的方法，并提供了完整的示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

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

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

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


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




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


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




  1. <divclass="myCls"></div>


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




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


   2. HTML DOM处理表格的方法


   HTML的DOM给<table/><tbody/></tr>等元素添加了一些特性和方法，如下面几个表所示：


   (1)给table添加的部分：




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


 (2)<tbody/>元素添加了以下内容：




rows<tbody/>中所有行的集合
deleteRow(pos)删除指定位置的行
insertRow(pos)在指定位置插入行
 (3)<tr/>中添加的内容：




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


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





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


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




参考书目：


《JavaScript高级程序设计》

                

        




    

    
  



    

      

        

            

              
                
                  iteye_11687
                
              
            

            

                关注
              
            

        

        

          
      

      










            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值