第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，这个节点已经事先指定了命名空间信息

JavaScript高级程序设计30.pdf的更多相关文章

  1. JavaScript高级程序设计61.pdf

    JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...

  2. JavaScript高级程序设计60.pdf

    错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...

  3. JavaScript高级程序设计58.pdf

    15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...

  4. JavaScript高级程序设计57.pdf

    表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...

  5. JavaScript高级程序设计55.pdf

    输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...

  6. JavaScript高级程序设计54.pdf

    过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...

  7. JavaScript高级程序设计53.pdf

    共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...

  8. JavaScript高级程序设计52.pdf

    表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...

  9. JavaScript高级程序设计50.pdf

    hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...

随机推荐

  1. centos 软件安装 删除

    centos的软件安装大致可以分为两种类型: [centos]rpm文件安装,使用rpm指令  类似[ubuntu]deb文件安装,使用dpkg指令 [centos]yum安装   类似[ubuntu ...

  2. 『奇葩问题集锦』Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

    第一步:npm config get prefix ,获取输出path“C:\Users\jaxGu\AppData\Roaming\npm”加上"\node_modules"用于 ...

  3. HTML新元素

    <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API <audio> 定义音频内容 <video> 定义视频(vid ...

  4. TDirectory.GetCreationTime、TDirectory.SetCreationTime获取和设置文件夹创建时间

    使用函数: System.IOUtils.TDirectory.GetCreationTime//获取创建时间 System.IOUtils.TDirectory.SetCreationTime//设 ...

  5. (转载).Net HttpPost的发送和接收示例代码

    HttpPost在不同系统进行数据交互的时候经常被使用.它的最大好处在于直接,不像Webservice或者WCF需要wsdl作为一个双方的"中介".在安全性上,往往通过IP限制的方 ...

  6. C# 使用Salt+Hash来为密码加密

    (一) 为什么要用哈希函数来加密密码 如果你需要保存密码(比如网站用户的密码),你要考虑如何保护这些密码数据,象下面那样直接将密码写入数据库中是极不安全的,因为任何可以打开数据库的人,都将可以直接看到 ...

  7. git 常用命令行整理

    1.创建分支dev git branch dev 2.切换到dev分支 git checkout dev 3.创建并切换本地分支,分支名为dev git checkout -b dev 4.查看本地所 ...

  8. 模型 - 视图 - 控制器（MVC）详解

    模型视图控制器(MVC)一个相当实用且十分流行的设计模式.作为一位称职码农,你不可能没听说过吧. 不幸的是它难以让人理解. 在本文中,我将给出我认为是MVC的最简单的解释,以及为什么你应该使用它. 什 ...

  9. 移除Ubuntu“下载额外数据不成功”的提示通知

    参考自经过几天的摸索,终于得出安装flashplugin-installer的方法 移除"下载额外数据不成功"的恼人提示通知,方法: $cd /usr/share/package- ...

  10. WordPress 全方位优化指南（下）

    上一篇 WordPress 全方位性能优化指南(上)主要从网站性能指标.优化缓存.MySQL 等方面给大家介绍了如何进行 WordPress 性能优化,但还远远不够,毕竟像 WordPress 这样的 ...