云之外
云之外

《JavaScript高级程序设计》Chapter 12 DOM 2 和 DOM 3

DOM 变化

  1. 如何确认浏览器是否支持 DOM 2 和 DOM 3 新增的模块：

    var supportsDOM2Core = document.implementation.hasFeature('Core', '2.0')
var supportsDOM3Core = document.implementation.hasFeature('Core', '3.0')
var supportsDOM2HTML = document.implementation.hasFeature('HTML', '2.0')
var supportsDOM2Views = document.implementation.hasFeature('Views', '2.0')
var supportsDOM2XML = document.implementation.hasFeature('XML', '2.0')

  2. 针对 XML 命名空间的变化

    • 混合命名空间

      
    
         Example XHTML page

    • 在 DOM 2 中，Node 类型包含下列特定于命名空间的属性：

      • localName：不带命名空间前缀的节点名称
      • namespaceURI：命名空间 URI 或者（在未指定的情况下）null
      • prefix：命名空间前缀或者（在未指定的情况下）null

    • DOM 3 引入了下列与命名空间有关的方法：

      • isDefaultNamespace(namespaceURI)：在指定的 namespaceURI是当前节点的默认命名空间时返回 true
      • lookupNamespaceURI(prefix)：返回给定 prefix 的命名空间。
      • lookupPrefix(namespaceURI)：返回给定 namespace 的前缀。

    • DOM 2 的 Document 也发生了变化，包含了下列与命名空间有关的方法：

      • createElementNS(namespaceURI, tagName)：使用给定的 tagName 创建一个属于命名空间 namespace 的新元素。
      • createAttributeNS(namespaceURI, attributeName)：使用给定的 attributeName 创建一个属于命名空间 namespaceURI 的新特性。
      • getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间 namespaceURI 的 tagName 元素的 NodeList 。

    • DOM 2 也为 Element 新增了一些方法：

      • getAttributeNS(namespaceURI, localName)：取得属于命名空间 namespaceURI 且名为 localName 的特性。
      • getAttributeNodeNS(namespaceURI, localName)：取得属于命名空间 namespaceURI 且名为 localName 的特性节点。
      • getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间 namespaceURI 的 tagName 元素的 NodeList 。
      • hasAttributeNS(namespaceURI, localName)：确定当前元素是否有一个名为 localName 的特性，而且该特性的命名空间是 namespaceURI 。
      • removeAttributeNS(namespaceURI, localName)：删除属于命名空间 namespaceURI 且名为 localName 的特性。
      • setAttributeNS(namespaceURI, qualifiedName, value)：设置属于命名空间 namespaceURI 且名为 qualifiedName 的特性值为 value 。
      • setAttributeNodeNS(attNode)：设置属于命名空间 namespaceURI 的特性节点。

    • NamedNodeMap 类型也新增了下列与命名空间有关的方法。由于特性是通过 NamedNodeMap 表示的，因此这些方法多数情况下只针对特性使用：

      • getNamedItemNS(namespaceURI, localName)：取得属于命名空间 namespaceURI 且名为 localName 的项。
      • removeNamedItemNS(namespaceURI, localName)：移除属于命名空间 namespaceURI 且名为 localName 的项。
      • setNamedItemNS(node)�：添加 node 。这个节点已经事先指定了命名空间信息。

  3. 其他方面的变化

    • DocumentType 新增了三个属性：
      • publicId：文档类型声明中的信息段之一（- //W3C//DTD HTML 4.0.1//EN）
      • systemId：文档类型声明中的信息段之一（http://www.w3.org/TR/html4/strict.dtd）
      • internalSubset：访问包含在文档类型声明中的额外定义。
    • Document 类型的变化：

      • 新增 importNode() 用来从一个文档中获取一个节点，然后将其导入到另一个文档中，使其成为这个文档结构的一部分。

        • 每个节点都有一个 ownerDocument 属性，表示所属的文档。如果调用 appendChild() 时传入的节点属于不同的文档，会导致错误。但是在调用 importNode() 的时候回返回一个归当前文档所有的新的节点。

      • 新增 defaultView 属性，保存一个指针，指向拥有给定文档的窗口（或框架）。IE 不支持这个属性，但有一个等价的属性名叫 parentWindow。因此，要确定文档窗口，可以使用以下代码：

        var parentWindow = document.defaultView || document.parentWindow

      • DOM 2 Core 为 document.implementation 对象规定了两个新方法：

        • createDocumentType()：创建一个新的 DocumentType 节点。接收三个参数：文档类型名称、publicId、systemId。这个方法只在创建新文档时有用。

          var doctype = document.implementation.createDocumentType("html", "-//W3C//DTD HTML 4.01//EN", "http://www.w3.org/TR/html4/strict.dtd")

        • createDocument()：创建新文档。接收三个参数：接受文档中元素的 namespaceURI、文档元素的标签名、新文档的文档类型。

          var doc = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", doctype)

      • DOM 2 HTML 为 document.implementation 新增了一个方法：createHTMLDocument() 。这个方法的用途是创建一个完整的 HTML 文档，包括 html, head, title, body 元素。它只接受一个参数，即新创建的文档的标题（放在 title 里），返回新的 HTML 文档。只有 Opera 和 Safari 支持这个方法。

    • Node 类型的变化

      • 添加了 isSupported() 方法：用于确定当前节点具有什么能力。接收两个参数：特性名、特性版本号。如果浏览器实现了相应特性，而且能够基于给定节点执行该特性，就返回 true 。

        document.body.isSupported("HTML", "2.0")

      • DOM 3 引入了两个辅助比较节点的方法：

        • isSameNode()：接收一个节点参数，并在传入节点与引用的节点相同（即同一个对象）时返回 true。
        • isEqualNode()：接收一个节点参数,并在传入节点与引用的节点相等（即类型相同）时返回 true。

      • DOM 3 针对为 DOM 节点添加额外数据引入了新方法：

        • setUserData()：将数据指定给节点。接收三个参数：要设置的键、实际的数据（可以是任何数据类型）、处理函数。
        • getUserData()：接收相同的三个参数，获取数据。
        • 传入 setUserData() 中的处理函数会在带有数据的节点被复制、删除、重命名或引入一个文档时调用。处理函数接收五个参数：表示操作类型的数值（1 - 复制，2 - 导入，3 - 删除，4 - 重命名），数据键、数据值、源节点和目标节点。删除时源节点是 null ；除复制外目标节点是 null 。
    • 框架的变化
      • HTMLFrameElement 和 HTMLIFrameElement 在 DOM 2 中都有了一个新属性：contentDocument。它包含一个指针，指向表示框架内容的文档对象。在此之前，无法直接通过元素取得这个文档对象（只能使用 frames 集合）。

        • contentDocument 属性是 Document 类型的实例，因此可以像使用其他 HTML 文档一样使用它，包括所有属性和方法。IE 8 之前不支持这个属性，但是支持一个名叫 contentWindow 的属性。

          var iframe = document.getElementById('myIframe')
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document

样式

  1. 确定浏览器是否支持 DOM 2 级定义的 CSS 能力：

    var supportsDOM2CSS = document.implementation.hasFeature('CSS', '2.0')
var supportsDOM2CSS2 = document.implementation.hasFeature('CSS2', '2.0')

  2. 访问元素的样式：

    • 任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性。这个 style 对象是 CSSStyleDeclaration 的实例，包含着通过 HTML 的 style 特性指定的所有样式信息，但不包含与外部样式表或嵌入样式表经层叠而来的样式。在 style 特性中指定的任何 CSS 属性都将表现为这个 style 对象的相应属性。对于使用短划线的 CSS 属性名，必须将其转换成驼峰大小写形式，才能通过 JavaScript 来访问。
      • 多数情况下，都可以通过简单地转换属性名的格式来实现转换。其中一个不能转换的 CSS 属性就是 float 。DOM 2 Style 规范规定样式对象上相应的属性名应该是 cssFloat，在 IE 上是 styleFloat 。
      • 在混杂模式下，没有给出度量单位的值，将默认为 px ，但是在标准模式下，这样的值会被忽略。
    • DOM 2 Style 规范为 style 对象定义了一些属性和方法。这些属性和方法在提供元素的 style 特性值的同时，也可以修改样式：
      • cssText：访问 style 特性中的 CSS 代码（可读可写）。
      • length：应用给元素的 CSS 属性的数量
      • parentRule：表示 CSS 信息的 CSSRule 对象。
      • getPropertyCSSValue(propertyName)：返回包含给定属性值的 CSSValue 对象。
        • CSSValue 包含两个属性：cssText 和 cssValueType ； cssValueType 是一个数值常量，表示值的类型：0 - 继承的值，1 - 基本的值，2 - 值列表， 3 - 自定义的值。
      • getPropertyPriority(propertyName)：如果给定的属性使用了 !important 设置，则返回 important ，否则返回空字符串。
      • getPropertyValue(propertyName)：返回给定属性的字符串值。
      • item(index)：返回给定位置的 CSS 属性的名称。
      • removeProperty(propertyName)：从样式中删除给定属性。
      • setProperty(propertyName, value, priority)：将给定属性设置为相应的值，并加上优先权标志（ important 或者一个空字符串）。
    • DOM 2 Style 增强了 document.defaultView ，提供了 getComputedStyle() 方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如： :after ）。如果不需要伪元素信息可以传入 null 。这个方法返回一个 CSSStyleDeclaration 对象，其中包含当前元素的所有计算后的样式。
      • 由于浏览器解释综合（ rollup ）属性的方式不同，所以类似 border 这样的综合属性，不会在所有浏览器中都有返回值，但是可以通过分别访问四个边的属性（例如 .borderLeftWidth ）得到值。
      • IE 不支持 getComputedStyle() 方法，但它有一种类似的概念。在 IE 中，每个具有 style 属性的元素还有一个 currentStyle 属性。这个属性是 CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式。
    • 不能指望某个 CSS 属性的默认值在不同浏览器中是相同的，比如 visibility 属性在有些浏览器中默认值是 visible ，有些是 inherit。如果你需要元素具有某个特定的默认值，应该手工在样式表中指定该值。

  3. 操作样式表

    • CSSStyleSheet 类型表示的是样式表，包括通过 元素包含的样式表和在