JavaScript 高级程序设计(第12章 DOM2和DOM3)

第12章 DOM2和DOM3

1. DOM2 级核心(DOM Level 2 Core):在 1 级核心基础上构建,为节点添加了更多方法和属性。
2. DOM2 级视图(DOM Level 2 Views):为文档定义了基于样式信息的不同视图。
3. DOM2 级事件(DOM Level 2 Events):说明了如何使用事件与 DOM 文档交互。
4. DOM2 级样式(DOM Level 2 Style):定义了如何以编程方式来访问和改变 CSS 样式信息。
5. DOM2 级遍历和范围(DOM Level 2 Traversal and Range):引入了遍历 DOM 文档和选择其特定
   部分的新接口。
6. DOM2 级 HTML(DOM Level 2 HTML):在 1 级 HTML 基础上构建,添加了更多属性、方法和新接口。

可以通过下列代码来确定浏览器是否支持这些 DOM 模块。

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");

1. DOM 变化

DOM2 级和 3 级的目的在于扩展 DOM API,以满足操作 XML 的所有需求,同时提供更好的错误处理及特性检测能力。从某种意义上讲,实现这一目的很大程度意味着对命名空间的支持。

1. DOM2 级核 心”没有引入新类型,它只是在 DOM1 级的基础上通过增加新方法和新属性来增强了既有类型。
2. “DOM3 级核心”同样增强了既有类型,但也引入了一些新类型。

(1) 针对XML命名空间的变化

1. 有了 XML 命名空间,不同 XML 文档的元素就可以混合在一起,共同构成格式良好的文档,而不必担心发生命名冲突。
2. HTML 不支持 XML 命名空间,但 XHTML 支持 XML 命名空间。
3. 命名空间要使用 xmlns 特性来指定。
4. XHTML 的命名空间是 http://www.w3.org/1999/xhtml,在任何 格式良好 XHTML 页面中,都应该将其包含在元素中。

• 其中的所有元素默认都被视为 XHTML 命名空间中的元素。

        
            
        
        
            Hello world!
        

• 要想明确地为 XML 命名空间创建前缀,可以使用 xmlns 后跟冒号,再后跟前缀。

        
            Example XHTML page
        
        //为了避免不同语言间的冲突,也需要使用命名空间来限定特性
            Hello world!
        

• 在混合使用两种语言的情况下,命名空间的用处

＊ Node 类型的变化

1. 在 DOM2 级中,Node 类型包含下列特定于命名空间的属性。

(1) localName: 不带命名空间前缀的节点名称。
(2) nameSpaceURI: 命名空间URI或者(在未指定的情况下是)null。
(3) prefix:命名空间前缀或者(在未指定的情况下是)null。
nodeName 等于 prefix+":"+ localName。

2. DOM3 级在此基础上更进一步,又引入了下列与命名空间有关的方法。

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

＊ Document 类型的变化

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

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

＊Element 类型的变化

(1) getAttributeNS(namespaceURI,localName):取得属于命名空间 namespaceURI 且名为 localName 的特性。
(2) getAttributeNodeNS(namespaceURI,localName):取得属于命名空间 namespaceURI 且 名为 localName 的特性节点。
(3) getElementsByTagNameNS(namespaceURI, tagName):返回属于命名空间 namespaceURI 的 tagName 元素的 NodeList。
(4) hasAttributeNS(namespaceURI,localName):确定当前元素是否有一个名为 localName 的特性,而且该特性的命名空间是 namespaceURI。注意,“DOM2 级核心”也增加了一个 hasAttribute()方法,用于不考虑命名空间的情况。
(5) removeAttriubteNS(namespaceURI,localName):删除属于命名空间 namespaceURI 且名 为 localName 的特性。
(6) setAttributeNS(namespaceURI,qualifiedName,value):设置属于命名空间 namespace- URI 且名为 qualifiedName 的特性的值为 value。
(7) setAttributeNodeNS(attNode):设置属于命名空间 namespaceURI 的特性节点。

＊ NamedNodeMap 类型的变化

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

(2) 其他方面的变化

＊ DocumentType 类型的变化

DocumentType 类型新增了 3 个属性:publicId、systemId 和 internalSubset。

1. 前两 个属性表示的是文档类型声明中的两个信息段
2. 属性 internalSubset,用于访问包含在文档类型声明中的额外定义。

]>

alert(document.doctype.publicId);
//    "-//W3C//DTD HTML 4.01//EN"

alert(document.doctype.systemId);
//   "http: //www.w3.org/TR/html4/strict.dtd"

alert(document.doctype.internalSubset);
//   ""

＊Document 类型的变化

importNode()方法:

1. 这个方法的用途是从一个文档中取得一个节点,然后将其导入到另一个文档,使其成为这个文档结构的一部分。
2. 每个节点都有一个 ownerDocument 属性,表示所属的文档。如果调用 appendChild()时传入的节点属于不同的文档(ownerDocument 属性的值不一样),则会导致错误。但在调用 importNode()时传入 不同文档的节点则会返回一个新节点,这个新节点的所有权归当前文档所有。
3. 接受两个参数:要复制的节点和一个表示是否复制子节点的布尔值。

//导入节点及其所有子节点
var newNode = document.importNode(oldNode, true); 
document.body.appendChild(newNode);

defaultView 的属性:

1. DOM2 级视图”模块属性,其中保存着一个指针,指向拥有给 定文档的窗口(或框架)。
2. 在 IE 中有一个等价的属性名叫 parentWindow(Opera 也支持这个属性)。

var parentWindow = document.defaultView || document.parentWindow;

DOM2 级核心”还为document.implementation 对象规定了 两个新方法:createDocumentType()和 createDocument()。

1. createDocumentType() 方法 : 于创建一个新的 DocumentType 节点,接受 3 个参数:文档类型名称、publicId、systemId。
2. createDocument()方法:3 个参数:针对文档中元素的 namespaceURI、文档元素的标签名、新文档的文档类型。

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

DOM2 级 HTML”模块也为 document.implementation新增了一个方法,名叫 createHTMLDocument()。

1. createHTMLDocument()方法:这个方法的用途是创建一个完整的 HTML 文档,包括、、
   var myDiv = document.getElementById("myDiv"); var computedStyle = document.defaultView.getComputedStyle(myDiv, null); alert(computedStyle.backgroundColor);// "red" alert(computedStyle.width);// "100px" alert(computedStyle.height);// "200px" alert(computedStyle.border);// 在某些浏览器中是"1px solid black"

   3. IE 不支持 getComputedStyle()方法,在 IE 中,每个具有 style 属性 的元素还有一个 currentStyle 属性。这个属性是 CSSStyleDeclaration 的实例,包含当前元素全 部计算后的样式。

   var myDiv = document.getElementById("myDiv");
   var computedStyle = myDiv.currentStyle;
   alert(computedStyle.backgroundColor);//"red"
   alert(computedStyle.width);//"100px"
   alert(computedStyle.height);//"200px"
   alert(computedStyle.border);//undefined
   

   * 所有计算的样式都是只读的;不能修改计算后样式对象中的 CSS 属性。
* 计算后的样式也包含属于浏览器内部样式表的样式信息,因此任何具有默认值 的 CSS 属性都会表现在计算后的样式中。

   (2) 操作样式表

   1. CSSStyleSheet 类型表示的是样式表,包括通过元素包含的样式表和在