JavaScript高级程序设计-第三版（DOM2和DOM3）

十二、DOM2和DOM3

• DOM2级核心
• DOM2级视图
• DOM2级事件（本章不涉及）
• DOM2级样式
• DOM2级遍历和范围：遍历DOM文档和选择其特定部分的新接口
• DOM2级HTML：添加更多属性、方法和新接口

12.1 DOM变化

12.1.1 针对XML命名空间的变化

• 解决在混合使用多种语言的情况下，通过DOM操作元素时，如何设定元素属于哪个命名空间以及获取元素时如何查看该元素包含在哪个命名空间中的问题
• 指定命名空间后，该元素及其子元素默认都属于该命名空间下

12.1.1.1 Node类型的变化

• DOM2级
  • localName 不带命名空间前缀的节点名称
  • namespaceURI 命名空间URI
  • prefix 命名空间前缀
  • nodeName或tagName
    • prefix：localName
    • <xhtml:head>
• DOM3级
  • isDefaultNamespace(namespaceURI) 元素是否在给定命名空间下，返回bool
  • lookupNamespaceURI(prefix) 根据前缀查找命名空间URI
  • lookupPrefix(namespaceURI) 根据URI查找命名空间前缀

12.1.1.2 Document类型的变化

• createElementNS(namespaceURI, tagName)
• createAttributeNS(namespaceURI, tagName)
• getElementsByTagNameNS(namespaceURI, tagName)

12.1.1.3 Element类型的变化

• getAttributeNS(namespaceURI, locationName) 获取特性值
• getAttributeNodeNS(namespaceURI, locationName)
• getElementsByTagNameNS(namespaceURI, tagName)
• hasAttributeNS(namespaceURI, locationName)
• removeAttributeNS(namespaceURI, locationName)
• setAttributeNS(namespaceURI, qualifiedName,value) 给某个元素添加特性
• setAttributeNodeNS(attrNode )

12.1.1.4 NamedNodeMap类型的变化

• 特性是通过NamedNodeMap类型表示的
• NamedNodeMap类型的新增方法
  • getNamedItemNS(namespaceURI, locationName)
  • removeNamedItemNS(namespaceURI, locationName)
  • setNamedItemNS(namespaceURI, locationName)

12.1.2 其他方面的变化

• 与命名空间无关，更倾向确保API的可靠性及完整性

12.1.2.1 DocumentType类型的变化

• <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd” [<!ELEMENT name (#PCDATA)>]>
• publicId
  • “-//W3C//DTD HTML 4.01//EN”
• systemId
  • “http://www.w3.org/TR/html4/strict.dtd” >
• internalSubset
  • <!ELEMENT name (#PCDATA)>

12.1.2.2 Document类型的变化

• importNode()
  • 每个节点都有ownerDocument属性，将其他文档的节点添加进另一个文档会报错
  • 接收参数
    • 要复制的节点
    • 是否复制子节点的bool
  • 作用
    • 传入不同文档的节点会返回一个新节点，该节点所有权归当前文档所有
• defaultView
  • 指向拥有给定文档的窗口或框架
• document.implementation
  • createDocumentType()
    • 创建一个新的DocumentType节点
    • 接收参数
      • 文档类型名称
      • publicId
      • systemId
    • 既有文档的文档类型不能改变，该方法只在创建新文档时有用
  • createDocument()
    • 创建新文档
    • 接收参数
      • 命名空间
      • 标签名（根节点）
      • 文档类型
  • createHTMLDocument()
    • 创建一个完整的HTML文档，包括html、head、title、body
    • 接收参数
      • 字符串——文档标题

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

12.1.2.3 Node类型的变化

• isSupported()
  • 确定当前节点是否具有某能力，类似document.implementation.hasFeature()
  • 传入参数
    • 特性名 DOM
    • 特性版本号
• DOM3
  • 比较节点的方法
    • isSameNode()
      • 引用同一个节点返回true
    • isEqualNode()
      • 可以是不同的节点，但节点类型、特性等相同返回true
  • 添加额外数据的方法
    • setUserData()
      • 键
      • 值
      • 函数
        • 在节点被复制、删除、重命名或引入文档中时触发
        • 接收参数
          • 表征操作类型的数值
            • 复制——1
            • 导入——2
            • 删除——3
            • 重命名——4
          • 键
          • 值
          • 源节点
          • 目标节点
    • getUserData(name)

12.1.2.4 框架的变化

• conentDocument
  • 指向表示框架内容的文档对象，类似框架的window.document
  • 访问框架的文档对象受跨域安全策略的限制
    • 框架中的页面来着其他域或不同子域，或使用不同协议，访问这个文档对象会报错

12.2 样式

• DOM2级样式围绕<link>、<style>、style特性三种机制提供API

12.2.1 访问元素的样式

• 任何支持style特性的HTML元素在JavaScript中都有一个style属性
  • 包含通过style特性指定的所有样式信息
  • 不包括外部样式表或嵌入样式表经层叠而来的样式
  • style特性中指定的任何CSS属性都将作为style对象的属性
    • 短划线的CSS属性名必须转换为驼峰大小写形式
    • 可以直接对CSS属性进行赋值，以设置样式

12.2.1.1 DOM样式属性和方法

• style
  • CSSStyleDeclaration对象
  • 属性及方法
    • cssText 读写整个style特性值
    • length CSS属性的数量
    • parentRule
    • getPropertyCSSValue(propertyName)
      • 返回包含给定属性值的CSSValue对象
        • CSSValue对象
          • cssText属性
            • 与getPropertyValue()相同
          • cssValueType属性：数值
            • 继承的值——0
            • 基本的值——1
            • 值列表——2
            • 自定义的值——3
    • getPropertyPriority(propertyName)
      • 若属性使用了！important ，则返回"important"；否则返回空字符串
    • getPropertyValue(propertyName)
    • item(index) 返回CSS属性名字符串
    • removeProperty(propertyName)
    • setProperty(propertyName, value, priority)
      • priority传入"important"或空字符串

12.2.1.2 计算的样式

• document.defaultView
  • getComputedStyle()
    • 返回层叠作用后的样式信息，CSSStyleDeclaration对象
    • 传入参数
      • 元素
      • 伪元素字符串，：after，可以传入null
    • 对于综合样式可能不会返回值，例如border等同时设置线宽、颜色等多个CSS属性
• IE
  • element.currentStyle

12.2.2 操作样式表

• document.styleSheets
  • 获取文档中的所有的样式表
• element.sheet
  • 直接通过<link>和<style>元素取得样式表
• CSSStyleSheet类型表示样式表，包括<link>和<style>中定义的
  • 继承自StyleSheet类型的属性（除disabled外均为只读）
    • disabled 可读写，表示是否禁用样式表
    • href <link>引入的，则返回RUL，否则为null
    • media 当前样式表支持的所有媒体类型的集合
    • ownerNode 指向拥有当前样式表的节点，如<link>或<style>，@import导入的则返回null
    • parentStyleSheet 指向@import导入的样式表
    • title ownerNode节点的title属性
    • type 样式表类型的字符串，如"type/css"
  • 自身支持的属性和方法
    • cssRules 样式表中包含的规则的集合
    • ownerRule 指向@import导入的规则
    • deleteRule(index)
    • insertRule(rule, index) 将字符串形式的规则插入指定位置

12.2.2.1 CSS规则

• CSSStyleRule类型
  • cssText 返回整条规则对应的文本，只读，包含选择符文本和花括号
  • parentRule 返回导入的规则
  • parentStyleSheet 当前规则所属的样式表
  • selectorText 选择符文本
  • style 类似CSS style特性对象
  • type 规则类型的常量值，样式规则为1

12.2.2.2 创建规则

• insertRule(rule, index)

12.2.2.3 删除规则

• deleteRule(index)

12.2.3 元素大小

12.2.3.1 偏移量

• 元素在屏幕上占用的所有可见空间
• offsetParent
  • 距元素最近的具有大小的元素

12.2.3.2 客户区大小

12.2.3.3 滚动大小

• 包含滚动内容的元素的大小，即包括在页面外的部分
  

12.2.3.4 确定元素大小

• element.getBoundingClientRect()
  • 返回矩形对象
    • 元素在页面中相对于视口的位置
    • 属性
      • left
      • top
      • right
      • bottom
    • 通过属性也可以计算出元素的大小

12.3 遍历

• 基于给定起点对DOM结构进行深度优先遍历
  • 在搜索其余的链路之前必须先完整地搜索单独的一条链路
• 遍历以给定节点为根，遍历该节点及其子节点，不能向上超出该根节点
  

12.3.1 NodeIterator

• document.createNodeIterator()
  • 传入参数
    • root 作为搜索起点的节点
    • whatToShow 表示要访问哪些节点的数字代码
      • NodeFilter.SHOW_ALL
      • NodeFilter.SHOW_ELEMENT
      • …
    • filter
      • NodeFilter类型或者直接传递一个函数
        • 该类型只有一个方法acceptNode()
          • 返回NodeFilter.FILTER_SKIP表示不访问
          • 返回NodeFilter.FILTER_ACCEPT表示访问
        • 抽象类型，只需要创建一个包含acceptNode()方法的对象
    • entityReferenceExpansion bool值，表示是否要拓展实体引用

var filter={
	acceptNode:function(){
		return node.tagName.toLowerCase()=="p"?
			NodeFilter.FILTER_ACCEPT:
			NodeFilter.FILTER_SKIP;
	}
}
document.createNodeIterator(root,NodeFilter.SHOW_ELEMENT,filter,false);

• NodeIterator
  • nextNode()
  • previousNode()

var div=document.getElementById("div1");
var iterator = document.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var node=iterator.nextNode();
while(node!=null){
	alert(node.tagName);
	node=node.nextNode();
}

12.3.2 TreeWalker

• TreeWalker类型
  • 与NodeIterator类型类似，但提供的移动方向更广
  • parentNode()
  • firstChild()
  • lastChild()
  • nextSibling()
  • previousSibling()
  • currentNode 可设置修改遍历继续进行的起点
• document.createTreeWalker（root, whatToShow, filter, entityReferenceExpansion）

12.4 范围

12.4.1 DOM中的范围

• document.createRange() 创建范围，返回Range类型的对象
• Range
  • startContainer 选区中第一个节点的父节点
  • startOffset 选区中的第一个节点在其父节点的ChildNodes中的索引，若startContainer是文本节点，则为字符偏移量
  • endContainer 选区中最后一个节点的父节点
  • endOffset 选区中的最后一个节点在其父节点的ChildNodes中的索引加1（不包括偏移量所指向的节点，所以加1）
  • commonAncestorContaioner startContainer和endContainer共同的祖先节点在文档树中位置最深的那个

12.4.1.1 用DOM范围实现简单选择

• Range
  • selectNode(Node) 选择Node节点及其子节点填充范围
  • selectNodeContents(Node) 只选择Node节点的子节点填充范围
  • setStartBefore(Node)
  • setStartAfter(Node)
  • setEndBefore(Node)
  • setEndAfter(Node)

<html>
	<body>
		<p id="p1"><b>Hello</b> world!</p>
	</body>
</html>

var range1=document.createRange();
var range2=document.createRange();
var p1=document.getElementById("p1");
range1.selectNode(p1);
range2.selectNodeContents(p1);

12.4.1.2 用DOM范围实现复杂选择

• Range
  以下方法可以用来选择节点的一部分
  • setStart(startContainer, startOffset) 设置范围的开始
  • setEnd(EndContainer, EndOffset) 设置范围的结束
  • 选中了父节点一定包括子节点，父节点在最外围，但选中子节点不一定包括父节点

<html>
	<body>
		<p id="p1"><b>Hello</b> world!</p>
	</body>
</html>

var range=document.createRange();
var p1=document.getElementById("p1");
var helloNode=p1.firstChild.firstChild;
var worldNode=p1.lastChild;
range.setStart(helloNode,2);
range.setEnd(worldNode,3);

12.4.1.3 操作DOM范围中的内容

• 创建范围时，内部会为范围创建一个文档片段，片段中的所有节点，只是指向文档中相应节点的指针
• Range
  • deleteContents() 删除范围包含的内容
  • extractContents() 删除并返回包含的内容
  • cloneContents() 创建范围内容的副本
• 调用以上方法时，范围会自动将拆分的结构补充完整，哪个标签不完整补齐哪个
  
  

12.4.1.4 插入DOM范围中的内容

• Range
  • insertNode(Node) 向范围选区的开始处插入一个节点
  • surroundContents(Node) 用Node节点将范围包裹，如果结构会破坏，则自动补齐

<html>
	<body>
		<p id="p1"><b>Hello</b> world!</p>
	</body>
</html>

var range=document.createRange();
var p1=document.getElementById("p1");
var helloNode=p1.firstChild.firstChild;
var worldNode=p1.lastChild;
range.setStart(helloNode,2);
range.setEnd(worldNode,3);
var span=document.createElement("span");
span.style.backgroundColor="yellow";
range.surroundContents(span);

12.4.1.5 折叠DOM范围

• Range
  • collapse()
    • 将范围折叠到长度为0，但不改变删除html
    • 传入参数
      • true 折叠到范围起点
      • false 折叠到范围终点
  • collapsed 判断范围中的两个节点是否紧密相邻

<p id="p1">Paragraph 1</p><p id="p2">Paragraph 2</p>

var range=document.createRange();
var p1=document.getElementById("p1");
var p2=document.getElementById("p2");
range.setStartAfter(p1);
range.setStartBefore(p2);
alert(range.collapsed);//true

12.4.1.6 比较DOM范围

• Range
  • compareBoundaryPoints() 确定两个范围是否有公共边界
    • 传入参数
      • 比较方式
        • Range.START_TO_START 比较第一个范围的起点和第二个范围的起点
        • Range.START_TO_END
        • Range.END_TO_END
        • Range.END_TO_START
      • 比较范围
    • 返回值
      • -1 第一个在第二个之前
      • 0
      • 1

12.4.1.7 复制DOM范围

• Range
  • cloneRange() 返回范围的副本，修改端点不会影响原范围

12.4.1.8 清理DOM范围

• Range
  • detach() 从创建范围的文档中分离出该范围

12.4.2 IE8及更早版本中的范围