本章探讨除“DOM2 级事件”之外的所有模块,“DOM2 级事件”模块将在第13 章进行全面讲解。
DOM3 级又增加了“XPath”模块和“加载与保存”(Load and Save)模块。这
些模块将在第18 章讨论。
12.1 DOM变化
DOM2 级和3 级的目的在于扩展DOM API,以满足操作XML 的所有需求,同时提供更好的错误处
理及特性检测能力。从某种意义上讲,实现这一目的很大程度意味着对命名空间的支持。“DOM2 级核
心”没有引入新类型,它只是在DOM1 级的基础上通过增加新方法和新属性来增强了既有类型。“DOM3
级核心”同样增强了既有类型,但也引入了一些新类型。
类似地,“DOM2 级视图”和“DOM2 级HTML”模块也增强了DOM 接口,提供了新的属性和方
法。由于这两个模块很小,因此我们将把它们与“DOM2 级核心”放在一起,讨论基本JavaScript 对象
的变化。可以通过下列代码来确定浏览器是否支持这些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");本章只讨论那些已经有浏览器实现的部分,任何浏览器都没有实现的部分将不作
有了XML 命名空间,不同XML 文档的元素就可以混合在一起,共同构成格式良好的文档,而不
必担心发生命名冲突。从技术上说,HTML 不支持XML 命名空间,但XHTML 支持XML 命名空间。
因此,本节给出的都是XHTML 的示例。
命名空间要使用xmlns 特性来指定。XHTML 的命名空间是http://www.w3.org/1999/xhtml,在任何
格式良好XHTML 页面中,都应该将其包含在<html>元素中,如下面的例子所示。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example XHTML page</title> </head> <body> Hello world! </body> </html>对这个例子而言,其中的所有元素默认都被视为XHTML 命名空间中的元素。要想明确地为XML
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"> <xhtml:head> <xhtml:title>Example XHTML page</xhtml:title> </xhtml:head> <xhtml:body> Hello world! </xhtml:body> </xhtml:html>这里为XHTML 的命名空间定义了一个名为xhtml 的前缀,并要求所有XHTML 元素都以该前缀
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"> <xhtml:head> <xhtml:title>Example XHTML page</xhtml:title> </xhtml:head> <xhtml:body xhtml:class="home"> Hello world! </xhtml:body> </xhtml:html>这个例子中的特性class 带有一个xhtml 前缀。在只基于一种语言编写XML 文档的情况下,命
一看下面这个混合了XHTML 和SVG 语言的文档:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example XHTML page</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="width:100%; height:100%"> <rect x="0" y="0" width="100" height="100" style="fill:red"/> </svg> </body> </html>在这个例子中,通过设置命名空间,将<svg>标识为了与包含文档无关的元素。此时,<svg>元素的
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example XHTML page</title> </head> <body> <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" style="width:100%; height:100%"> <s:rect x="0" y="0" width="100" height="100" style="fill:red"/> </s:svg> </body> </html>对于<html>元素来说,它的localName 和tagName 是"html",namespaceURI 是"http://www.
alert(document.body.isDefaultNamespace("http://www.w3.org/1999/xhtml"); //true //假设svg 中包含着对<s:svg>的引用 alert(svg.lookupPrefix("http://www.w3.org/2000/svg")); //"s" alert(svg.lookupNamespaceURI("s")); //"http://www.w3.org/2000/svg"在取得了一个节点,但不知道该节点与文档其他元素之间关系的情况下,这些方法是很有用的。
//创建一个新的SVG 元素 var svg = document.createElementNS("http://www.w3.org/2000/svg","svg"); //创建一个属于某个命名空间的新特性 var att = document.createAttributeNS("http://www.somewhere.com", "random"); //取得所有XHTML 元素 var elems = document.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "*");只有在文档中存在两个或多个命名空间时,这些与命名空间有关的方法才是必需的。