HTML DOM架构研究

W3C的DOM有2个版本：核心DOM和HTML DOM。核心DOM是一个语言独立和模块独立的API，它能够在任何语言中实现，而不仅仅是在JavaScript中实现，例如JAVA DOM实现，XML DOM实现等。HTML DOM是网页的面向对象的层次式的视图，其中的对象映射了不同的HTML元素，例如HTMLParagraphElement代表了p标签。其实所谓的DOM就是W3C定义的一套接口（interface），每个接口定义了一些属性和方法，具体实现由浏览器实现。而HTML DOM其实就是继承了核心DOM的接口，并在此基础上添加HTML所独有的属性和方法，例如id。

DOM中最主要的数据类型是node对象，node对象代表文档树中的一个单独的节点，一共有12种节点类型，当然最常见的是元素节点、属性节点、文本节点。Node对象定义了一些通用的属性和方法，如nodeName, nodeType, nodeValue等属性以及appendChild()等方法。同时W3C还为元素节点专门定制了一个element接口，该接口继承了node接口，同时又专门为元素节点添加了一些属性和方法，例如tagName。

现在回到HTML DOM中来，上面说了，HTML DOM是继承了核心DOM的，例如，HTML DOM的元素节点HTMLElement是继承自核心DOM的element接口，因此除了核心DOM element的属性和方法，HTMLElement还添加了一些HTML里常用的一些属性，如id, title, lang, dir, className(就是class,因为class是JavaScript保留关键字，所以就改用className代替)，除了这些标准的属性，各个浏览器还添加了一些非标准的属性，如最常用的innerHTML属性，查看所有。而几乎所有的HTML都继承了HTMLElement，这也是为什么我们可以用属性的方式访问id等，例如var hello = document.getElementById("abc"); var id = hello.id。

HTML DOM里另外一个重要的元素HTMLDocument是继承于核心DOM的Document接口，并添加了一些HTML相关的属性及方法：document.images, document.forms, document.body, document.domain等属性以及doucment.open(), document.write等方法。其实HTML DOM为每个HTML标签都创建了对象的接口，如HTMLDivElement, HTMLTableElement，所有这些元素节点基本上都继承了HTMLElement接口，有些元素在HTMLElement基础上作了扩展，如a标签添加了href属性。

当然各个浏览器在实现DOM时并没有完全按照标准来实现的，例如IE添加了大量的私有属性，同时好多标准属性它也不支持；Firefox除了支持标准的DOM之外，还对DOM作了一定的扩展，其实也是私有属性。例如innerHTML属性虽然不是标准属性，但所有的浏览器都支持该属性。目前来看消除浏览器差异的最好的方法还是使用jQuery等类似的JS框架来编程，有JS框架来屏蔽差异性。

 

参考文献：

1. Document Object Model HTML

2. Document Object Model Core

3. XML DOM 教程

4. HTML DOM 教程

5. W3C Document Object Model (DOM)