JavaScript高级程序设计之DOM2和DOM3之DOM 变化之针对XML命名空间的变化第12.1.1讲

来源：互联网发布：oracle示例数据库安装编辑：程序博客网时间：2024/05/21 09:24

DOM1 级主要定义的是HTML 和XML 文档的底层结构。DOM2 和DOM3 级则在这个结构
的基础上引入了更多的交互能力，也支持了更高级的XML 特性。为此，DOM2 和DOM3
级分为许多模块（模块之间具有某种关联），分别描述了DOM 的某个非常具体的子集。这些模块
如下。
DOM2 级核心（DOM Level 2 Core）：在1 级核心基础上构建，为节点添加了更多方法和属性。
DOM2 级视图（DOM Level 2 Views）：为文档定义了基于样式信息的不同视图。
DOM2 级事件（DOM Level 2 Events）：说明了如何使用事件与DOM 文档交互。
DOM2 级样式（DOM Level 2 Style）：定义了如何以编程方式来访问和改变CSS 样式信息。
DOM2 级遍历和范围（DOM Level 2 Traversal and Range）：引入了遍历DOM 文档和选择其特定
部分的新接口。
DOM2 级HTML（DOM Level 2 HTML）：在1 级HTML 基础上构建，添加了更多属性、方法和
新接口。

本章探讨除“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");

本章只讨论那些已经有浏览器实现的部分，任何浏览器都没有实现的部分将不作
讨论。
12.1.1
针对XML命名空间的变化

有了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
命名空间创建前缀，可以使用xmlns 后跟冒号，再后跟前缀，如下所示。

<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>元素的
所有子元素，以及这些元素的所有特性，都被认为属于http://www.w3.org/2000/svg 命名空间。即
使这个文档从技术上说是一个XHTML 文档，但因为有了命名空间，其中的SVG 代码也仍然是有效的。
对于类似这样的文档来说，最有意思的事发生在调用方法操作文档节点的情况下。例如，在创建一
个元素时，这个元素属于哪个命名空间呢？在查询一个特殊标签名时，应该将结果包含在哪个命名空间
中呢？“DOM2 级核心”通过为大多数DOM1 级方法提供特定于命名空间的版本解决了这个问题。
1. Node 类型的变化
在DOM2 级中，Node 类型包含下列特定于命名空间的属性。
localName：不带命名空间前缀的节点名称。
namespaceURI：命名空间URI 或者（在未指定的情况下是）null。
prefix：命名空间前缀或者（在未指定的情况下是）null。
当节点使用了命名空间前缀时，其nodeName 等于prefix+":"+ localName。以下面的文档为例：

<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.
w3.org/1999/xhtml"，而prefix 是null。对于<s:svg>元素而言，它的localName 是"svg"，
tagName 是"s:svg"，namespaceURI 是"http://www.w3.org/2000/svg"，而prefix 是"s"。
DOM3 级在此基础上更进一步，又引入了下列与命名空间有关的方法。
isDefaultNamespace(namespaceURI)：在指定的namespaceURI 是当前节点的默认命名空
间的情况下返回true。
lookupNamespaceURI(prefix)：返回给定prefix 的命名空间。
lookupPrefix(namespaceURI)：返回给定namespaceURI 的前缀。
针对前面的例子，可以执行下列代码：

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"

在取得了一个节点，但不知道该节点与文档其他元素之间关系的情况下，这些方法是很有用的。
2. Document 类型的变化
DOM2 级中的Document 类型也发生了变化，包含了下列与命名空间有关的方法。
createElementNS(namespaceURI, tagName)：使用给定的tagName 创建一个属于命名空
间namespaceURI 的新元素。
createAttributeNS(namespaceURI, attributeName)：使用给定的attributeName 创
建一个属于命名空间namespaceURI 的新特性。
getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间namespaceURI
的tagName 元素的NodeList。
使用这些方法时需要传入表示命名空间的URI（而不是命名空间前缀），如下面的例子所示。

//创建一个新的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", "*");

只有在文档中存在两个或多个命名空间时，这些与命名空间有关的方法才是必需的。
3. Element 类型的变化
“DOM2 级核心”中有关Element 的变化，主要涉及操作特性。新增的方法如下。
getAttributeNS(namespaceURI,localName)：取得属于命名空间namespaceURI 且名为
localName 的特性。
getAttributeNodeNS(namespaceURI,localName)：取得属于命名空间namespaceURI 且
名为localName 的特性节点。
getElementsByTagNameNS(namespaceURI, tagName)：返回属于命名空间namespaceURI
的tagName 元素的NodeList。
hasAttributeNS(namespaceURI,localName)：确定当前元素是否有一个名为localName
的特性，而且该特性的命名空间是namespaceURI。注意，“DOM2 级核心”也增加了一个
hasAttribute()方法，用于不考虑命名空间的情况。
removeAttriubteNS(namespaceURI,localName)：删除属于命名空间namespaceURI 且名
为localName 的特性。
setAttributeNS(namespaceURI,qualifiedName,value)：设置属于命名空间namespace-
URI 且名为qualifiedName 的特性的值为value。
setAttributeNodeNS(attNode)：设置属于命名空间namespaceURI 的特性节点。
除了第一个参数之外，这些方法与DOM1 级中相关方法的作用相同；第一个参数始终都是一个命
名空间URI。
4. NamedNodeMap 类型的变化
NamedNodeMap 类型也新增了下列与命名空间有关的方法。由于特性是通过NamedNodeMap 表示
的，因此这些方法多数情况下只针对特性使用。
getNamedItemNS(namespaceURI,localName)：取得属于命名空间namespaceURI 且名为
localName 的项。
removeNamedItemNS(namespaceURI,localName)：移除属于命名空间namespaceURI 且名
为localName 的项。
setNamedItemNS(node)：添加node，这个节点已经事先指定了命名空间信息。
由于一般都是通过元素访问特性，所以这些方法很少使用。

0 0