高程3总结#第12章DOM2和DOM3

DOM2和DOM3

DOM变化

针对XML命名空间的变化

• 有了XML命名空间，不同XML文档的元素就可以混合在一起，共同构成格式良好的文档，而不必担心发生命名冲突

• Node类型的变化

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

    • localName，不带命名空间前缀的节点名称
    • namespaceURI，命名空间URI或者null
    • prefix，命名空间前缀或者null

  • DOM3级更进一步，引入下列与命名空间有关的方法

    • isDefaultNamespace(namespaceURI)，在指定的namespaceURI是当前节点的默认命名空间的情况下返回true
    • lookupNamespaceURI(prefix)，返回给定prefix的命名空间
    • lookupPrefix(namespaceURI)，返回给定namespaceURI的前缀

• Document类型的变化

  • DOM2级的Document类型也发生了变化，包含下列与命名空间有关方法

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

• Element类型的变化

  • DOM2级核心中有关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且名为localName的特性
    • setAttributeNodeNS(attNode)，设置属于命名空间namespaceURI的特性节点

• NamedNodeMap类型的变化

  • 新增了与命名空间有关的方法

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

其他方面的变化

• DocumentType类型的变化

  • 新增了3个属性，publicId、systemId、internallSubset。前两个属性表示的是文档类型声明中的两个信息段，这两个信息段在DOM1级中是没有办法访问到的。最后一个属性internalSubset，用于访问包含在文档类型声明中的额外定义

• Document类型的变化

  • 与空间无关的方法是inportNode()，这个方法的用途是从一个文档中取得一个节点，然后将其导入到另一个文档，使其成为这个文档结构的一部分。

• Node类型的变化

  • Node类型与命名空间无关的变化，就是添加了isSupported()方法，与DOM1级为document.implementation引入的hasFeature()方法类似，isSupported()方法用于确定当前节点具有什么能力，这个方法接收两个参数，特性名和特性版本号
  • DOM3级引入了两个辅助比较节点的方法，isSameNode()和isEqualNode()。这两个方法都接收一个节点参数，并在传入节点与引用的节点相同或相等时返回true

• 框架的变化

  • 框架和内嵌框架分别用HTMLFrameElement和HTMLIFrameElement表示，它们在DOM2级中都有了一个新属性，名叫contentDocument，这个属性包含一个指针，指向表示框架内容的文档对象

样式

访问元素的样式

• 对于使用短划线的CSS属性名，必须将其转换成驼峰大小写形式，才能通过javaScript来访问

• DOM样式属性和方法

  • DOM2级样式规范还为style对象定义了一些属性和方法，这些属性和方法在提供元素的style特性值的同时也可以修改样式
  • cssText ：如前所述，通过它能够访问到 style 特性中的 CSS 代码。
  • length ：应用给元素的 CSS 属性的数量。
  • parentRule ：表示 CSS 信息的 CSSRule 对象。本节后面将讨论 CSSRule 类型。
  • getPropertyCSSValue(propertyName) ：返回包含给定属性值的 CSSValue 对象。
  • getPropertyPriority(propertyName) ：如果给定的属性使用了 !important 设置，则返回"important" ；否则，返回空字符串。
  • getPropertyValue(propertyName) ：返回给定属性的字符串值。
  • item(index) ：返回给定位置的 CSS 属性的名称。
  • removeProperty(propertyName) ：从样式中删除给定属性。
  • setProperty(propertyName,value,priority) ：将给定属性设置为相应的值，并加上优先权标志（ "important" 或者一个空字符串）。

• 计算的样式

  • DOM2级样式增强了document.defaultView，提供了getComputedStyle()方法，这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素信息，第二个参数可以输null

操作样式表

• CSSStyleSheet类型表示的是样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表

  • disabled ：表示样式表是否被禁用的布尔值。这个属性是可读/写的，将这个值设置为 true 可以禁用样式表。
  • href ：如果样式表是通过 <link> 包含的，则是样式表的 URL；否则，是 null 。
  • media ：当前样式表支持的所有媒体类型的集合。与所有 DOM 集合一样，这个集合也有一个length 属性和一个 item() 方法。也可以使用方括号语法取得集合中特定的项。如果集合是空列表，表示样式表适用于所有媒体。在 IE 中， media 是一个反映 <link> 和 <style> 元素 media特性值的字符串。
  • ownerNode ：指向拥有当前样式表的节点的指针，样式表可能是在 HTML 中通过 <link> 或<style/> 引入的（在 XML 中可能是通过处理指令引入的）。如果当前样式表是其他样式表通过@import 导入的，则这个属性值为 null 。IE 不支持这个属性。
  • parentStyleSheet ：在当前样式表是通过 @import 导入的情况下，这个属性是一个指向导入它的样式表的指针。
  • title ： ownerNode 中 title 属性的值。
  • type ：表示样式表类型的字符串。对 CSS 样式表而言，这个字符串是 "type/css" 。

• 除了 disabled 属性之外，其他属性都是只读的。在支持以上所有这些属性的基础上，CSSStyleSheet 类型还支持下列属性和方法：

  • cssRules ：样式表中包含的样式规则的集合。IE 不支持这个属性，但有一个类似的 rules 属性。
  • ownerRule ：如果样式表是通过@import 导入的，这个属性就是一个指针，指向表示导入的规则；否则，值为 null 。IE不支持这个属性。
  • deleteRule(index) ：删除 cssRules 集合中指定位置的规则。IE 不支持这个方法，但支持一个类似的 removeRule() 方法。
  • insertRule(rule,index) ：向 cssRules 集合中指定的位置插入 rule 字符串。IE 不支持这个方法，但支持一个类似的 addRule() 方法。

元素大小

• 偏移量

  • 包括元素在屏幕上占用的所有可见的空间，元素的可见大小由其高度。宽度决定，包括所有内边距、滚动条和边框的大小

    • offsetHeight ：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
    • offsetWidth ：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
    • offsetLeft ：元素的左外边框至包含元素的左内边框之间的像素距离。
    • offsetTop ：元素的上外边框至包含元素的上内边框之间的像素距离。
      

• 客户区大小

  • 指的是元素内容及其内边距所占据空间的大小，有关客户区大小的属性有两个，clientWidth和clientHeight，其中clientWidth属性是元素内容区宽度加上左右内边距宽度，clientHeight属性时元素内容区域高度加上上下内边距高度
    

• 滚动大小

  • 指的是包含滚动内容的元素的大小，有些元素即使没有执行代码也能自动地添加滚动条，但另外一些元素，则需要通过CSS的overflow属性进行设置才能滚动
  • scrollHeight ：在没有滚动条的情况下，元素内容的总高度。
  • scrollWidth ：在没有滚动条的情况下，元素内容的总宽度。
  • scrollLeft ：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
  • scrollTop ：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
    

遍历

• 任何节点都可以作为遍历的根节点。如果假设 <body> 元素为根节点，那么遍历的第一步就是访问 <p>元素，然后再访问同为 <body> 元素后代的两个文本节点。不过，这次遍历永远不会到达 <html> 、 <head>元素，也不会到达不属于 <body> 元素子树的任何节点。而以 document 为根节点的遍历则可以访问到文档中的全部节点。
  
  

Nodelterator

• 可以使用document.createNodeIterator()方法创建它的新实例

  • root ：想要作为搜索起点的树中的节点。
  • whatToShow ：表示要访问哪些节点的数字代码。
  • filter ：是一个 NodeFilter 对象，或者一个表示应该接受还是拒绝某种特定节点的函数。
  • entityReferenceExpansion ：布尔值，表示是否要扩展实体引用。这个参数在 HTML 页面中没有用，因为其中的实体引用不能扩展

• whatToShow参数是一个位掩码，通过应用一个或多个过滤器来确定要访问的节点

  • NodeFilter.SHOW_ALL ：显示所有类型的节点。
  • NodeFilter.SHOW_ELEMENT ：显示元素节点。
  • NodeFilter.SHOW_ATTRIBUTE ：显示特性节点。由于 DOM结构原因，实际上不能使用这个值。
  • NodeFilter.SHOW_TEXT ：显示文本节点。
  • NodeFilter.SHOW_CDATA_SECTION ：显示 CDATA 节点。对 HTML 页面没有用。
  • NodeFilter.SHOW_ENTITY_REFERENCE ：显示实体引用节点。对 HTML 页面没有用。
  • NodeFilter.SHOW_ENTITYE ：显示实体节点。对 HTML 页面没有用。
  • NodeFilter.SHOW_PROCESSING_INSTRUCTION ：显示处理指令节点。对 HTML 页面没有用。
  • NodeFilter.SHOW_COMMENT ：显示注释节点。
  • NodeFilter.SHOW_DOCUMENT ：显示文档节点。
  • NodeFilter.SHOW_DOCUMENT_TYPE ：显示文档类型节点。
  • NodeFilter.SHOW_DOCUMENT_FRAGMENT ：显示文档片段节点。对 HTML 页面没有用。
  • NodeFilter.SHOW_NOTATION ：显示符号节点。对 HTML 页面没有用

TreeWalker

• 是更高级的一个版本，除了包括nextNode()和previousNode()在内的相同的功能之外，这个类型还提供了用于不同方向上遍历DOM结构的方法

  • parentNode() ：遍历到当前节点的父节点；
  • firstChild() ：遍历到当前节点的第一个子节点；
  • lastChild() ：遍历到当前节点的最后一个子节点；
  • nextSibling() ：遍历到当前节点的下一个同辈节点；
  • previousSibling() ：遍历到当前节点的上一个同辈节点

范围

DOM中的范围

• DOM2级在Document类型中定义了createRange()方法
• 要使用范围来选择文档中的一部分，最简单的方式就是使用selectNode()或selectNodeContents()这两个方法都接收一个参数，即一个DOM节点，然后使用该节点中的信息来填充范围
• selectNode()方法选择整个节点，包括其子节点，而selectNodeContents()方法则至选择节点的子节点
• 要创建复杂的范围就需要用setStart()和setEnd()方法，这两个方法都接收两个参数，一个参照节点和一个偏移量值
  
• 利用范围可以删除或复制内容，还可以像前面介绍的那样操作范围中的内容，使用insertNode()方法可以向范围选区的开始处插入一个节点

• 可以使用compareBoundaryPoints()方法来确定这些范围是否有公共的边界，这个方法接收两个参数，表示比较方式的常量值和要比较的范围

  • Range.START_TO_START(0) ：比较第一个范围和第二个范围的起点；
  • Range.START_TO_END(1) ：比较第一个范围的起点和第二个范围的终点；
  • Range.END_TO_END(2) ：比较第一个范围和第二个范围的终点；
  • Range.END_TO_START(3) ：比较第一个范围的终点和第一个范围的起点。
• 可以使用cloneRange()方法复制范围，这个方法会创建调用它的范围的一个副本
• 在使用完范围之后，最好是调用detach()方法，以便从创建范围的文档中分离出该范围。调用detach()之后，就可以放心地解除对范围的引用，从而让垃圾回收机制回收内存了。

IE8及更早版本中的范围

• 选择页面中某一区域的最简单方式，就是使用范围的findText()方法，这个方法会找到第一次出现的给定文本，并将范围移过来以环绕该文本。如果没有找到文本，这个方法返回false；否则返回true
• IE中与DOM中的selectNode()方法最接近的方法是moveToElementText()，这个方法接受一个DOM元素，并选择该元素的所有文本，包括HTML标签

• IE提供四个方法，以特定的增量向四周移动范围：move()、moveStart()、moveEnd()、expand()，其中移动单位是下列一种字符串值

  • character逐个字符地移动
  • word逐个单词地移动
  • sentence逐个句子地移动
  • textedit移动到当前范围选区的开始或结束位置
• 在IE中操作范围中的内容可以使用text属性或pasteHTML()方法，通过text属性可以取得范围中的内容文本，也可以通过这个属性设置范围中的内容文本
• IE为范围提供collapse()方法与相应的DOM方法用法一样，传入true把范围折叠到起点，传入false把范围折叠到终点
• IE中的compareEndPoints()方法与DOM范围的compareBoundaryPoints()方法类似，这个方法接收两个参数，比较的类型和要比较的范围
• 在IE中使用duplicate()方法可以复制文本范围，结果会创建原范围的一个副本