开发者社区> sp42> 正文

HTML+DOM与XML+DOM之间的区别与联系

简介: 像在座阅读此文的读者一样,由于自身的兴趣,我对 AJAX 编程方面的研究是持续不断的。随着该领域的深入,我越来越发觉所谓的浏览器 DOM,即 HTML DOM,是一个非常值得关注的点。在与资深的技术人员们交换意见的时候,也曾谈到过这样的观点,就是关于 DOM Level 1,我们仍然缺乏具有深度的、规范的辅助读物,而且网络上搜索也比较少见。
+关注继续查看

像在座阅读此文的读者一样,由于自身的兴趣,我对 AJAX 编程方面的研究是持续不断的。随着该领域的深入,我越来越发觉所谓的浏览器 DOM,即 HTML DOM,是一个非常值得关注的点。在与资深的技术人员们交换意见的时候,也曾谈到过这样的观点,就是关于 DOM Level 1,我们仍然缺乏具有深度的、规范的辅助读物,而且网络上搜索也比较少见。我们真正的想法在于,工作的时候我们不仅仅是去翻阅工具库/ API 那些高级的抽象内容。

为此我打算在本文中拨开其中的云雾,如果您正好想用用“ DOM-脚本”做很多的事情,那么接下来课题内容便适合您了,也可以当作抛砖引玉的 DOM 介绍。本文内容的主题便是,为什么开发者要认为“DOM Level 1规范的架构”是至关重要的,其突出的重要性在哪里等等,以及还有 HTML DOM 和  XML DOM 之间微妙的区别及内在的联系。

W3C  所制订的 DOM Level 分为两大模块:Core 和 HTML。第一个大模块是 Core 核心,W3C 规范是这样描述 Core 的:

“满足软件开发者和 Web 脚本编写者,访问和操控产品项目中包含的可解析的 HTML 和 XML  内容。”
"sufficicent to allow software developers and web script authora toaccess and mainipulate parsed HTML and XML content inside conformingproducts."

第二个为 HTML 模块,其规范描述是:

“HTML 之中特定元素的功能,和恰到好处的、易用的、针对常见性任务的 HTML 文档操作机制。”
"functionality that depends on specific elements defined in 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)”。讨论该结构可以以从两个方面入手:一、一切皆是节点对象(Node Object,从扁平化的角度去理解,flattened view,乃适合于多态下的接口);二、每个对象继承于基类节点,实现了节点的接口(interface,OO 继承的角度去理解);

请观察一下这段 HTML:

<div id="myDiv">Hello World</div>

这是一个闭合的 div 标签。由 DOM Level 1 的层面来分析可以有以下几点内容:

  • 标签 div 可作为“节点对象 Node Object(扁平化角度,前面已述)”,或者元素对象 Element Object (继承的角度 - 元素继承于 Node)。
  • 节点属性 id 也可作为“节点对象 Node Object(扁平化角度)”,或者属性对象 Attribute 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.getAttributes("id"); // 从Element实现的方法返回

但使用 DOM 1 HTML 方式的话,我们仅仅如此:

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 Module 实际差别不大。本来我们一直都不太强调这种界定,以致忽略了它们细微的差异。如果我们觉得还是模棱两可的话,我们可进一步查探它们的明细。个人认为处理 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 则不然。

By Frank(zhangxin)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
DOM(二)——动画,改变HTML,事件,节点,集合
JavaScript 动画是通过对元素样式进行渐进式变化编程完成的。 这种变化通过一个计数器来调用,当计数器间隔很小时,动画看上去就是连贯的
18 0
HTML DOM(一)——简介,元素,表单
通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量 JavaScript 能改变页面中的所有 HTML 元素 JavaScript 能改变页面中的所有 HTML 属性 JavaScript 能改变页面中的所有 CSS 样式 JavaScript 能删除已有的 HTML 元素和属性 JavaScript 能添加新的 HTML 元素和属性 JavaScript 能对页面中所有已有的 HTML 事件作出反应 JavaScript 能在页面中创建新的 HTML 事件
10 0
通过DOM对HTML文档的元素内容和CSS样式进行操作
通过DOM对HTML文档的元素内容和CSS样式进行操作 通过前面的学习我们应该可以了解到,通过DOM我们可以操作HTMl文档中的任意的元素及属性,文本内容。其实实际工作中我们用到最多的是怎样通过DOM操作HTML文档中的CSS样式。 HTML代码: <button id="btn">切换</button> <div class="wrap" id="wrap" style="color: yellow;"> <p id="text" class="text">这是一个段落</p> <ul class="list">
28 0
两个相同的负载user在一起启动的时候,造成相关接口调用第一次报异常 调用第二次正常 如此反反复复 解决方法;mysql复习、JavaScript HTML BOM和DOM触发监听机制事件
两个相同的负载user在一起启动的时候 造成相关接口调用第一次报异常 调用第二次正常 如此反反复复 解决方法 放掉一个实例个数
39 0
JS DOM之使用对象方法操作HTML属性
1.getAttribute 在JavaScript中,我们可以使用getAttribute()方法来获取元素某个属性的值
32 0
Web前端学习:JavaScript基础 【HTML DOM操作】2
Web前端学习:JavaScript基础 【HTML DOM操作】
28 0
Web前端学习:JavaScript基础 【HTML DOM操作】
Web前端学习:JavaScript基础 【HTML DOM操作】
31 0
js逐步教你实现DOM系统(html逻辑 css逻辑 js逻辑)
js逐步教你实现DOM系统(html逻辑 css逻辑 js逻辑)
65 0
web前端学习(三十九)——JavaScript DOM简介、通过DOM修改HTML、CSS
web前端学习(三十九)——JavaScript DOM简介、通过DOM修改HTML、CSS
59 0
HTML中dom转成图片进行存储
做作业的时候,需要在手机上预览下,但是发现如果想在移动端上展示A4样子的作业还是挺麻烦的,最后还是准备通过图片来展示,然后移动端缩放呗。。
202 0
+关注
sp42
移动项目技术负责人。多年全栈经验,熟悉 Java 和 JS,CSDN 博客技术专家,著有《ExtJS 详解与实践》等书。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
天猫HTML5互动技术实践
立即下载
《零基础HTML入门教程》
立即下载