1.HTML中的DOM

        W3C再开发XML DOM的同时，还针对XHTML以及HTML开发了DOM。这个DOM定义了一个HTMLDocument和HTMLElement作为这种实现的基础。每个HTML元素由对应的HTMLElement类型来表示。例如HTMLDivElement代表

标签。

2.访问相关节点

        document对象既是BOM的一部分，也是DOM的一部分。因此DOM的处理过程大多数都是以document对象开始的。直接看代码吧。有点特别的东西都在注释里进行了说明。

 

   
   
   
   
    
    
    
    
    
  1. <html> 
    2. 
    
    
    
    
  2.     <head> 
    3. 
    
    
    
    
  3.         <title>DOM Exampletitle> 
    4. 
    
    
    
    
  4.         <script type="text/javascript"> 
    5. 
    
    
    
    
  5.             function domTest() { 
    6. 
    
    
    
    
  6.                 var oHtml = document.documentElement;//返回HTML的<html>标签对应的元素 
    7. 
    
    
    
    
  7.                 var oHead = oHtml.firstChild; 
    8. 
    
    
    
    
  8.                 var oBody = oHtml.lastChild; 
    9. 
    
    
    
    
  9.                 //var oHead = oHtml.childNodes[0]; 
    10. 
    
    
    
    
  10.                 //var oHead = oHtml.childNodes.item(0); 
    11. 
    
    
    
    
  11.                 //var oBody = oHtml.childNodes[1]; 
    12. 
    
    
    
    
  12.                 //var oBody = oHtml.childNodes.item(1); 
    13. 
    
    
    
    
  13.                 //HTML DOM 预定义了body属性直接指向<body>标签 
    14. 
    
    
    
    
  14.                 //var oBody = document.body; 
    15. 
    
    
    
    
  15.                 alert(oHtml.childNodes.length); 
    16. 
    
    
    
    
  16.                  
    17. 
    
    
    
    
  17.                 alert(oHead.parentNode == oHtml); 
    18. 
    
    
    
    
  18.                 alert(oBody.parentNode == oHtml); 
    19. 
    
    
    
    
  19.                 alert(oBody.previousSibling == oHead); 
    20. 
    
    
    
    
  20.                 alert(oHead.nextSibling == oBody); 
    21. 
    
    
    
    
  21.                 alert(oHead.ownerDocument == document);//ownerDocument属性指向该文档对象 
    22. 
    
    
    
    
  22.  
    23. 
    
    
    
    
  23.             } 
    24. 
    
    
    
    
  24.         script> 
    25. 
    
    
    
    
  25.     head> 
    26. 
    
    
    
    
  26.     <body onload="domTest()"> 
    27. 
    
    
    
    
  27.         <p>Hello,World!p> 
    28. 
    
    
    
    
  28.         <p>Isn't thhis exciting?p> 
    29. 
    
    
    
    
  29.         <p>You are learing to use DOM!p> 
    30. 
    
    
    
    
  30.     body> 
    31. 
    
    
    
    
  31. html> 
    32.

3.检测DOM节点类型

        可以通过nodeType属性来检测节点的类型。上一篇博客中已经提到了12中节点类型，并且举例说明了。这里不再赘述。

        检测方法一：返回的是Node接口中定义的节点类型常量代表的数字。

 

   
   
   
   
    
    
    
    
    
  1. alert(document.nodeType);//输出9 
    2. 
    
    
    
    
  2. alert(document.documentElement.nodeType);//输出1 
    3.

        检测方法二：使用Node中的常量匹配来检测节点类型。

 

   
   
   
   
    
    
    
    
    
  1. alert(document.nodeType == Node.DOCUMENT_NODE); //输出true 
    2. 
    
    
    
    
  2. alert(document.documentElement.nodeType == Node.ELEMENT_NODE);//输出true 
    3.

       但是上面的第二种方法在IE以外的浏览器上基本上都没问题，IE则不行。我测试了一下，既是用IE8也还会报错。那么可以自定义匹配节点类型的常量来解决这个问题。见代码：

 

   
   
   
   
    
    
    
    
    
  1. if(typeof Node == "undefined") { 
    2. 
    
    
    
    
  2.     var Node = { 
    3. 
    
    
    
    
  3.         ELEMENT_NODE:1, 
    4. 
    
    
    
    
  4.         ATTRIBUTE_NODE:2, 
    5. 
    
    
    
    
  5.         TEXT_NODE:3, 
    6. 
    
    
    
    
  6.         CDATA_SECTION_NODE:4, 
    7. 
    
    
    
    
  7.         ENTITY_REFERENCE_NODE:5, 
    8. 
    
    
    
    
  8.         ENTITY_NODE:6, 
    9. 
    
    
    
    
  9.         PROCESSING_INSTRUCTION_NODE:7, 
    10. 
    
    
    
    
  10.         COMMENT_NODE:8, 
    11. 
    
    
    
    
  11.         DOCUMENT_NODE:9, 
    12. 
    
    
    
    
  12.         DOCUMENT_TYPE_NODE:10, 
    13. 
    
    
    
    
  13.         DOCUMENT_FRAGMENT_NODE:11, 
    14. 
    
    
    
    
  14.         NOTATION_NODE:12 
    15. 
    
    
    
    
  15.     }; 
    16. 
    
    
    
    
  16. } 
    17.

参考书目：

《JavaScript高级编程》Nicolas C. Zakas著， 曹力 张欣 等译。