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,这个节点已经事先指定了命名空间信息
JavaScript高级程序设计30.pdf的更多相关文章
- JavaScript高级程序设计61.pdf
JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...
- JavaScript高级程序设计60.pdf
错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...
- JavaScript高级程序设计58.pdf
15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...
- JavaScript高级程序设计57.pdf
表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...
- JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
- JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
- JavaScript高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
- JavaScript高级程序设计52.pdf
表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...
- JavaScript高级程序设计50.pdf
hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...
随机推荐
- Ubuntu 之旅—— 调整扩展屏分辨率
打开终端输入 xrandr 得到如下信息 Screen 0: minimum 320 x 200, current 2390 x 768, maximum 8192 x 8192 LVDS conne ...
- centos 6.3 64位安装php5.5及配置tengine
PHP 用到的工具包: yum install gd-devel libjpeg-devel libpng-devel freetype-devel libxml2-devel curl-devel ...
- [转]ef获取某个表中的部分字段值
我有个新闻表 id,title,body,createtime,author,click 使用ef4.1 仅仅读取 id,title,createtime 并显示在页面上. public static ...
- 简单的网页采集程序(ASP.NET MVC4)
因为懒人太多,造成现在网页数据采集非常的流行,我也来写个简单的记录一下. 之前写了MVC的基本框架的搭建随笔,后面因为公司太忙,个人感情问题:(,导致不想写了,就写了两篇给删除了,现在就搁浅了, 本人 ...
- iOS 推荐博客
著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:Franz Fang链接:http://www.zhihu.com/question/20264108/answer/3026 ...
- jquery点击图片选中特效
jquery点击图片选中特效 点击在线预览效果
- java 容器类大集结
这个世界是程序员的世界,归根到底是数据的世界,要统治这个世界,首先要学会征服数据. 没有最好的,只有最合适的,如何在不同的环境先选择最优的存储的结构呢?且看下文分解: 以下内容部分来自网络,参考: h ...
- The Unified Modeling Language(UML)
统一过程建模语言UML 统一过程建模语言UML是一种标准的可视化建模语言,使用在: 业务建模和类似的过程 居于软件系统的分析.设计.和实现 UML 是一门通用语言,提供给业务分析员,软件架构师和开发 ...
- bzoj 1845: [Cqoi2005] 三角形面积并 扫描线
1845: [Cqoi2005] 三角形面积并 Time Limit: 3 Sec Memory Limit: 64 MBSubmit: 848 Solved: 206[Submit][Statu ...
- Stanford CoreNLP--Part of Speech
Stanford CoreNLP Part Of Speech简称POS,主要是对待分析的句子中的单词进行标记的功能,如标记名词.动词等,该组件是CoreNLP工程的一部分,详细内容可参考:CoreN ...