DOM1级主要定义的是HTML和XML的底层结构。DOM2和DOM3级则在这个结构的基础上引入了更多的交互能力。
  DOM2和DOM3又可以分为许多模块,如下:

  • DOM2核心
  • DOM2视图
  • DOM2事件
  • DOM2样式
  • DOM2遍历和范围
  • DOM2 HTML

1 DOM2和DOM3的变化

1.1 针对XML命名空间的变化

  命名空间使用xmlns特性指定。变化有如下:

  • Node类型的变化
  • Document类型的变化
  • Element类型的变化
  • NamedNodeMap类型的变化

1.2 其他方面的变化

  • DocumentType类型的变化(新增了上属性publicId,systemId,internalSubnet)
  • Document类型的变化(新增importNode方法,用于将文档中取一个节点,然后将其导入到另一个文档。新增defaultView属性,执行拥有给定文档的窗口。document.implementation对象新增了两个方法createDocumentType()与createDocument。DOM HTML还为documentimplentation新增了方法createHTMLDocument)
  • Node类型的变化(添加了isSupported方法;添加了两个辅助比较节点的方法isSameNode()与isEqualNode();添加了为DOM节点添加额为数据的方法setUserData())
  • 框架的变化(为框架HTMLFrameElement和内嵌框架HTMLIFrameElemnt添加了一个属性cotentDocument)

2 操作样式的DOM API

2.1 访问元素的样式

   每个HTML元素有一个style属性。

  • DOM2级样式为style对象定义了 一些属性和方法。
  • DOM2级样式增强了document.defaultView,提供了getComputedStyle()方法。

2.2 操作样式表

  • 应用于文档的所有样式表可以通过document.styleSheets集合来表示
  • 创建规则可以通过insertRule(),addRule()
  • 删除规则可以使用deleteRule()

2.3 元素大小

DOM2和DOM3
红线:表示clientHeight,蓝线表示clientWidth,以上属性都可以通过documentElement.方式获取。
DOM2和DOM3

3 DOM遍历与范围

  可以采用NodeIterator和TreeWalker对dom结构进行深度遍历。其中创建NodeIterator用document.createNodeIterator。TreeWalker使用起来比NodeIterator更加灵活,可以通过document.createTreeWalker()创建。

相关文章: