- 浏览: 145243 次
- 性别:
- 来自: 大连
文章分类
最新评论
-
houfeng0923:
zensh 写道这种Promise用起来还是复杂了点,需要大量 ...
使用jQuery Deferred 和 Promise 创建响应式应用程序 -
zensh:
这种Promise用起来还是复杂了点,需要大量处理异步任务的同 ...
使用jQuery Deferred 和 Promise 创建响应式应用程序 -
Troland:
houfeng0923 写道Troland 写道
functi ...
JavaScript设计模式摘要(一) -
houfeng0923:
Troland 写道
function extend(subc ...
JavaScript设计模式摘要(一) -
Troland:
function extend(subclass,super ...
JavaScript设计模式摘要(一)
原文链接: http://developer.51cto.com/art/201009/225276.htm
摘要:随着我们对Web开发的深入了解,能够感觉到DOM是一个非常值得关注的点。为此,文章将详细的介绍HTML DOM和XML DOM之间微妙的区别及内在的联系。
本文内容的主题便是,为什么开发者要认为“DOM Level 1规范的架构”是至关重要的,其突出的重要性在哪里等等,以及还有HTML DOM和XML DOM之间微妙的区别及内在的联系。
W3C所制订的DOM Level分为两大模块:Core和HTML。第一个大模块是Core核心,W3C规范是这样描述Core的:满足软件开发者和Web脚本编写者,访问和操控产品项目中包含的可解析的HTML和XML内容。
第二个HTML模块,规范描述为:HTML之中特定元素的功能,和恰到好处的、易用的、针对常见性任务的HTML文档操作机制。
以上可见两者的重要性。同时HTML模块的意义也在于,解决了向后兼容的问题,这在当今符合DOM Level 1的浏览器中已经可以提供适应的解决方案。
按照这样的说法,如果您仍然不能理解上述的要义,我们则可以这样认为,HTML文档可以使用Core API和HTML API两者;而XML文档只能使用Core API。换句话说,HTML与XML重叠的部分有Core API,而HTML API则是不能共享的部分,顾名思义限于HTML文档所使用。这是我们认识Core/HTML的初步认识。
理解DOM Level 1 Core
理解DOM Level 1 Core之要义实质在于将Core看待成为许多节点(Nodes)而组成的文档(Document),也就是说,此文档结构中可允许存在着大量的条目项,其每一项都可理解为“节点”。讨论该结构可以以两个方面入手:一、一切皆是节点对象(Node Object,扁平化的角度去理解,flattened view,乃适合于多态下的接口);二、每个对象继承于基类节点,实现了节点的接口(interface,OO继承的角度去理解)。请观察一下这段HTML:
view plaincopy to clipboardprint?
<div id="myDiv">Hello World</div>
<div id="myDiv">Hello World</div>
这是一个闭合的div标签。从DOM Level 1的层面来分析可以有以下几点内容:
◆标签div可作为“节点对象Node Object(扁平化角度,前面已述)”,或者元素对象Element OBject(继承的角度-元素继承于Node)。
◆节点属性id也可作为“节点对象Node Object(扁平化角度)”,或者属性对象Attr. OBject(继承的角度- Attr继承于Node)。
◆文本“Hello world”也可作为“节点对象Node Object(扁平化角度)”,字符串对象CharacterData对象(继承的角度- CharacterData继承于Node),Text文本对象(继承的角度- Text继承于CharacterData)。
稍微归纳一下,就是DOM 1 Core部分中一切皆是节点,节点以及其接口都可实现在每个对象身上(从继承的角度理解出发),实现了节点接口才可以有节点的属性、方法。——这是我们理解的前提。然后,根据特定的节点类型的不同,其接口的属性和方法都是不同的,视乎DOM对该节点的设计而定。
理解DOM Level 1 HTML
我们日常工作的时候,跟HTML文档打交道,其实就是属于W3C所规定的DOM Level 1 HTML模块内的处理工作。HTML DOM的特性和方法不是标准的DOM实现,是专门针对HTML同时也让一些DOM操作变的更加简便。HTML模块集中表现在HTMLElement接口上,即为全体元素类型的对象所实现的接口。就该文讨论的范围而言,HTMLElement接口的参与形式与上述的 Node节点接口非常地相似。一旦引入了OO设计观,只要实现了HTMLElement接口的对象,就可以定义它为元素了。一份HTML文档有相当多的都是元素,当然还有,表示文档本身的HTMLDocument和集合容器HTMLCollection等等。
因此,要准确理解DOM 1 HTML的模块,必须认识其接口是基于元素的(Element-based),而不是基于节点的(Node-based)。那样的话,元素方式与节点方式到底又有什么区别呢(Element v.s Node),应该如何界定两者呢?例如节点属性(properties of elements),当在“基于元素”的语境中,就是“属性(attributes)”,并非独立的节点对象。——尽管按照某个角度讲,元素是节点的一种特例,我们仍可保留“节点”这一说法,一个标签(tag)便是一个“节点”。假如我们要得到id属性的字符串的值是什么,采用DOM 1 Core的方式就是:
myElement.attributes["id"].value; // 从Node接口提供的属性
myElement.attributes["id"].value; // 从Node接口提供的属性
等于下面的方法:
myElement.getAttribute("id"); // 从Element实现的方法返回
myElement.getAttribute("id"); // 从Element实现的方法返回
但使用DOM 1 HTML方式的话,我们仅仅如此:
myElement.id;
myElement.id;
这般就可以获取id了。此时此刻,你可能会认为,XML文档本身就不一定缺省有id的属性,而因为有你所说的HTMLElement.id属性预先定义在API中,当然HTML中的每个元素就有id的属性啦——这里的意思没有错,也不妨碍我们的理解。的确全体的HTML元素均有id一项的属性,不管HTMLDivElement\HTMLImageElement\……
Core or HTML Module?
既然这样,那我应该使用Core的API,还是HTML模块的API?对于HTML的文档来说,用Core或HTML Moduel实际差别不大。本来我们一直都不太强调这种界定,以致忽略了它们细微的差异。如果我们觉得还是模棱两可的话,我们可进一步查探它们的明细。
个人认为处理XHTML并使用Core API这样更能够说明XHTML的“X”,即表明这份HTML就是一份标准的XML文档,以便与原有HTML 4.1从语义上区别开来。但请记住,当处理一份XML结构的文档的时候,自然而然就是采用Core去处理。通过XHMLHttpRequest请求执行后所返回的responseXML结果,只能使用Core的API去处理分析,就不能够采用HTML的了。
小结
通过文本开发者应该明白到,HTML DOM与XML DOM之间,既有区别,又有联系。一般而言,除了上述比较外,须值得一提的就是,HTML是可以允许不Well-Form的,XML就不行。
【相关】
评论
http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247
http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-745549614
http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#ID-642250288
有个疑问,这个确定是从element实现的方法返回的吗?
首先抱歉,转帖的时候没有仔细审核下,有个错误的地方,代码处应该是myElement.getAttribute("id")。(已修改)
你可以参考下:
http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-745549614
在level 1 core 中,定义了Element对象,提供了getAttribute方法。
有个疑问,这个确定是从element实现的方法返回的吗?
发表评论
-
使用jQuery Deferred 和 Promise 创建响应式应用程序
2012-11-12 20:41 6180翻译自:Creating Responsive Applica ... -
YUI3学习(十)---基于组件框架的Widget实例(GoogleMapWidget)
2012-03-03 20:37 2867本文遵循YUI3 Widget组件设计理念,继承YUI Wi ... -
Google Maps API V3 学习摘要
2012-03-03 20:40 3805Google Maps API V3 学习摘要 ... -
dojo类机制模拟实现
2011-09-29 11:00 1592偶然在infoq上看到朋友的文章《dojo类机制简 ... -
web前端研发工程师编程能力成长之路 [转]
2011-09-29 10:26 1999【背景】 如果你是刚进入WEB前端研发领域,想试试这 ... -
Web开发乱码分析总结
2011-09-28 17:08 1612今天对前端开发常见的乱码情况进行了汇总测试和分析,并做了 ... -
document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
2011-09-28 16:54 1572注:(scrollHeight、o ... -
DOCTYPE, HTML和XHTML, Strict DTD和Transitional DTD, Quirks Mode和Standard Mode
2011-09-26 16:53 1651转自:http://blog.csdn.net/w ... -
YUI3学习(九)---组件框架之 Widget
2011-08-10 21:53 2899Widget部件类是YUI3所 ... -
YUI3学习(八)---组件框架之 Plugin
2011-08-08 17:42 2309插件可以让你无侵入地为衍生自Base类的宿主对象 ... -
YUI3学习(七)---组件框架之 Base
2011-08-05 22:45 2116Base组件 Base被设计为那些衍生自Attribute和 ... -
JavaScript链式调用小结
2011-08-03 22:47 4829zYUI3 Node对象实现链式调用的方式如下: Y. ... -
JavaScript设计模式摘要(一)
2011-08-03 22:52 2028---------------------------- ... -
YUI3学习(六)---组件框架之 Attribute
2011-08-01 22:57 25651,YUI3组件框架 组 ... -
YUI3 AOP
2011-07-28 23:10 0YUI3在’event-custom’模块的Y.Do类提 ... -
Yahoo关于性能优化的N条军规[转]
2011-07-21 18:48 1950一、 Yahoo的军规条例: 谨记:80%-90%的终 ... -
Javascript的10个设计缺陷[转]
2011-07-20 21:37 1114作者: 阮一峰 日期: -
YUI3学习(五)--- Event
2011-07-28 23:09 4664YUI Event 组件 通过提供简单的Dom事件响应接口为 ... -
YUI3学习(四)--- Node
2011-07-16 17:07 3187YUI3 ‘node’ 模块为创建、操作和获取DOM节点对象 ... -
JavaScript+语言精髓与编程实践 精简电子版摘要
2011-07-13 21:21 1551首先 面向对象特性 :封装继承多态,满足部分特性的语言称 ...
相关推荐
**XML与HTML的比较** 1. **第一种表达方式**:HTML简单地将数据作为文本直接显示,没有结构和语义。 2. **第二种表达方式**:HTML利用表格来组织数据,虽然有了一定的结构,但表格的目的是为了布局,而非数据描述。...
HTML和XML的主要区别在于: 1. HTML的标签预定义,如`<p>`(段落)、`<img>`(图像),而XML的标签由用户定义。 2. HTML主要用于网页的展示,而XML关注数据的存储和传输。 3. HTML有内建的样式和行为,如`<b>`(加粗...
HTML5小游戏:大话摇骰子 HTML5作为现代网页开发的重要技术,为开发者提供了创建交互性强、功能丰富的网络应用的可能。"大话摇骰子"是一款基于HTML5的在线小游戏,它模拟了传统的掷骰子游戏,让玩家可以在网页上...
5. **保持动画连贯性**:确保转换后的动画在播放时流畅,帧率与原WAS文件一致,避免出现卡顿或失真。 6. **优化输出**:根据需要,可以进行进一步的优化,例如压缩图片质量以减小文件大小,或者使用更高效的编码...
将WAS文件转成PNG,可以帮助开发者更容易地查看和分析游戏资源,或者进行二次创作。 源码的分析与学习对于理解游戏资源的解码过程至关重要。通常,这样的程序会包括读取WAS文件的二进制数据,解析其内部结构,提取...
《大话3WDF解包器:深入解析与应用》 在计算机游戏中,资源的管理与存储是一项重要的技术,尤其对于大型多人在线游戏(MMORPG)如“大话西游”系列来说,如何高效地组织和加载游戏资源是至关重要的。本文将详细探讨...
此外,对于标签中的"大话鼠标"、"大话西游鼠标"和"西游鼠标",这些都是对这款鼠标指针主题的关键词描述,它们强调了这款主题的特色在于与《大话西游》这部电影的关联。用户在使用这款主题时,可以感受到电影中的角色...
大话信号系统是一本信号系统的入门书籍,深入浅出地讲解了信号系统相关知识
《大话2与梦幻资源提取工具详解》 在游戏开发和玩家自创内容的世界里,对游戏资源的访问和编辑是提升游戏体验、创新个性化内容的关键。本文将深入探讨“大话2和梦幻资源提取工具”,它是一款专为这两款热门游戏设计...
找了好多发现was转各种的都不太好用,所以通过c#自己开发了一个。测试:2w个was文件转png速率在10/s。was文件数量平均大小:2000kb。有需要的可以下载使用。感兴趣的可以加技术交流群:642525519
PHPWind论坛是一款在中国广泛应用的开源社区论坛软件,其大话3风格是PHPWind众多主题样式中的一款,专门设计用于提供类似《大话西游3》游戏的视觉体验和交互效果。这一风格通常会包含定制的界面元素、色彩搭配、图标...
《大话西游2》是一款深受玩家喜爱的网络游戏,其背后有着复杂的系统和丰富的资源管理。在这款游戏中,素材的管理是至关重要的,这直接影响到游戏的视觉效果、音效体验以及整体的游戏性能。"大话素材目录.zip" 是一个...
**标题解析:**“大话FPGA,教你如何玩转FPGA”这一标题,直观地传达了FPGA设计并非严肃无趣的专业领域,而是充满乐趣与创造性的活动。FPGA(Field-Programmable Gate Array)即现场可编程门阵列,是一种集成电路,...
大话地图提取
《大话西游素材查看工具详解与应用》 在游戏开发和设计领域,素材管理是一项至关重要的工作。尤其是在中国的网络游戏领域,"大话西游"作为一款深受玩家喜爱的经典游戏,其背后的素材制作与管理自然也备受关注。本文...
大话云计算【高清】
这个名为“大话西游2与梦幻西游的地图提取器(包含遮挡图)”的项目,是使用C++编程语言编写的控制台应用程序,专用于从这两款知名网络游戏——大话西游2和梦幻西游中提取地图资源。下面将详细介绍这个项目所涉及的...
### 大话梦幻素材提取教程:游戏资源的精细化提取与应用 #### 引言 《大话西游》和《梦幻西游》作为经典网络游戏,其丰富的美术资源一直是玩家和游戏开发者关注的焦点。本文旨在提供一套详尽的教程,指导如何从...
大话设计模式总结.pdf大话设计模式总结.pdf大话设计模式总结.pdf大话设计模式总结.pdf大话设计模式总结.pdf
其与4G相比,不仅在速度上显著提升,还具备了更多创新特性,如支持海量数据连接、灵活适配多种空口技术、支持超高速率数据传输等。5G的业务场景和技术指标是其研究的重要组成部分,包括增强型移动宽带(eMBB)、超...