首页 > 代码库 > JavaScript高级程序设计30.pdf
JavaScript高级程序设计30.pdf
第12章 DOM2和DOM3
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文档和选择其特定部分新接口
检测浏览器是否支持这些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命名空间，不同XML文档的元素可以混合在一起，共同构成格式良好的文档，HTML不支持XML命名空间，但XHTML支持XML命名空间，本节给出的都是XHTML的示例
命名空间要使用xmlns特性来指定，XHTML的命名空间是http://www.w3.org/1999/xhtml,
<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="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元素都以该前缀开头，有时候为了避免不同语言间的冲突，也需要命名空间来限定特性，在只基于一种语言编写XML文档的情况下，命名空间实际上没什么用，在混合使用两种语言情况下，命名空间用处非常大
<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级方法提供特定于命名空间的版本解决了这个问题
Node类型的变化
在DOM2级中，Node类型包含下列特定与命名空间的属性
localName：不带命名空间前缀的节点名称；
namespaceURI：命名空间URI或者（在未指定情况下是）null；
prefix：命名空间前缀或者（在未指定情况下是）null。
当节点使用了命名空间前缀时，其nodeName等于prefix+":"+localName
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
使用这些方法时需要传入表示命名空间的URI（而不是命名空间前缀）
//创建一个新的SVG元素
var svg=document.createElementNS("http://www.w3.org/2000/svg","svg");
只有在文档中存在两个或多个命名空间时，这些与命名空间有关的方法才是必需的
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()方法，用于不考虑命名空间的情况
removeAttributeNS(namespaceURI,localName)：删除属于命名空间namespaceURI且名为localName的特性
setAttributeNS(namespaceURI,qualifiedName，value)：设置属于命名空间namespaceURI且名为localName的特性的值为value
setAttributeNodeNS(attNode):设置属于命名空间namespaceURI的特性节点，除了第一个参数，这些方法与DOM1级中相关方法作用相同；第一个参数始终是一个命名空间
NamedNodeMap类型的变化
getNamedItemNS(namespaceURI,localName)：取得属于命名空间namespaceURI且名为localName的项
removeNamedItemNS(namespaceURI,localName)：移除属于命名空间namespaceURI且名为localName的项
setNamedItemNS(node)：添加node，这个节点已经事先指定了命名空间信息