1.HTML中的DOM

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

2.访问相关节点

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

 

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

3.检测DOM节点类型

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

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

 

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

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

 

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

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

 

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

参考书目：

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