HTML DOM架构研究
2010年07月08日
W3C的DOM有2个版本:核心DOM和HTML DOM。核心DOM是一个语言独立和模块独立的API,它能够在任何语言中实现,而不仅仅是在JavaScript中实现,例如JAVA DOM实现,XML DOM实现等。HTML DOM是网页的面向对象的层次式的视图,其中的对象映射了不同的HTML元素,例如HTMLParagraphElement代表了p标签。其实所谓的DOM就是W3C定义的一套接口(interface),每个接口定义了一些属性和方法,具体实现由浏览器实现。而HTML DOM其实就是继承了核心DOM的接口,并在此基础上添加HTML所独有的属性和方法,例如id。
DOM中最主要的数据类型是node 对象,node对象 代表文档树中的一个单独的节点,一共有12种节点类型 , 当然最常见的是元素节点、属性节点、文本节点。Node对象定义了一些通用的属性和方法,如nodeName, nodeType, nodeValue等属性以及appendChild()等方法。同时W3C还为元素节点专门定制了一个element 接口,该接口继承了node接口,同时又专门为元素节点添加了一些属性和方法,例如tagName。
现在回到HTML DOM中来,上面说了,HTML DOM是继承了核心DOM的,例如,HTML DOM的元素节点HTMLElement 是继承自核心DOM的element接口,因此除了核心DOM element的属性和方法,HTMLElement还添加了一些HTML里常用的一些属性,如id, title, lang, dir, className(就是class,因为class是JavaScript保留关键字,所以就改用className代替),除了这些标准的属性,各个浏览器还添加了一些非标准的属性,如最常用的innerHTML属性,查看所有 。而几乎所有的HTML都继承了HTMLElement,这也是为什么我们可以用属性的方式访问id等,例如var hello = document.getElementById("abc"); var id = hello.id。
HTML DOM里另外一个重要的元素HTMLDocument 是继承于核心DOM的Document 接口,并添加了一些HTML相关的属性及方法:document.images, document.forms, document.body, document.domain等属性以及doucment.open(), document.write等方法。其实HTML DOM为每个HTML标签都创建了对象的接口,如HTMLDivElement, HTMLTableElement,所有这些元素节点基本上都继承了HTMLElement接口,有些元素在HTMLElement基础上作了扩展,如a标签添加了href属性。
当然各个浏览器在实现DOM时并没有完全按照标准来实现的,例如IE添加了大量的私有属性,同时好多标准属性它也不支持;Firefox除了支持标准的DOM之外,还对DOM作了一定的扩展,其实也是私有属性。例如innerHTML属性虽然不是标准属性,但所有的浏览器都支持该属性。目前来看消除浏览器差异的最好的方法还是使用jQuery 等类似的JS框架来编程,有JS框架来屏蔽差异性。
参考文献:
1. Document Object Model HTML
2. Document Object Model Core
3. XML DOM 教程
4. HTML DOM 教程
5. W3C Document Object Model (DOM)
发表评论
-
抠出淘宝的菜单树
2012-01-20 10:11 572抠出淘宝的菜单树 2010年08月17日 淘宝登陆用户的 ... -
再谈Iframe的问题
2012-01-20 10:11 554再谈Iframe的问题 2010年1 ... -
http中的request和session的关系。
2012-01-20 10:11 663http中的request和session的关系。 2010 ... -
今天继续完善自己写的跨域iframe自适应高
2012-01-20 10:11 675今天继续完善自己写的 ... -
大班下学期计划
2012-01-19 15:12 675大班下学期计划 2011年01月28日 大班下学期计划 ... -
大班下学期家长会发言稿
2012-01-19 15:12 1024大班下学期家长会发言 ... -
下学期个人工作计划
2012-01-19 15:12 648下学期个人工作计划 2010年06月26日 ... -
大班德育工作计划11
2012-01-19 15:12 720大班德育工作计划11 2011年02月18日 大班下学期 ... -
大班下学期家长会流程
2012-01-19 15:12 1367大班下学期家长会流程 2011年03月07日 家长会流程 ... -
观察者模式
2012-01-17 04:59 669观察者模式 2011年12月19日 class JPDe ... -
请列出你在从事DBA生涯中,最难以忘怀的一次误操作(1)
2012-01-17 04:59 569请列出你在从事DBA生涯中,最难以忘怀的一次误操作(1) 2 ... -
javabook
2012-01-17 04:59 701javabook 2010年07月09日 ... -
(转) How To Ask Questions The Smart Way 提问的智慧
2012-01-17 04:59 546(转) How To Ask Questions The ... -
perl 经典入门(2)
2012-01-17 04:59 736perl 经典入门(2) 2010年06 ... -
flex连接数据库总结
2012-01-16 03:50 647flex连接数据库总结 2010年01月11日 首先,做 ... -
43个热门Flex和ActionScript 3.0 APIs,技巧和工具
2012-01-16 03:50 55143个热门Flex和ActionScript 3.0 APIs ... -
【转载】[东华艺宗]网页游戏开发之Flex SDK 4命名空间
2012-01-16 03:50 596【转载】[东华艺宗]网页游戏开发之Flex SDK 4命名空间 ... -
Flex超酷皮肤主题推荐
2012-01-16 03:50 1689Flex超酷皮肤主题推荐 2009年07月29日 当程序 ... -
FLEX 做的不错的网站
2012-01-16 03:50 670FLEX 做的不错的网站 200 ...
相关推荐
第1章介绍了渐进增强模型的定义,剖析了模型的架构(结构层、表现层和行为层)和优势,并对比了“渐进增强”与“平稳退化”。第2章介绍了如何在浏览器中运用JavaScript语言,初步提到适时运用CSS规则、提升用户体验...
针对MVC模式的B/S架构...通过文档对象模型DOM将各文档定义为树形结构的数据对象,同时处理HTML文档中的元素。最后用JavaScript编码处理页面中的对象,实现Ajax技术在MVC模式中的应用,提高信息系统Web页面的交互性。
2.4.1 使用JavaScript操作DOM 2.4.2 寻找DOM节点 2.4.3 创建DOM节点 2.4.4 为文档增加样式 2.4.5 捷径:使用innerHTML属性 2.5 使用XML技术异步加载数据 2.5.1 IFrame 2.5.2 XMLDocument和XMLHttpRequest对象 2 5.3 ...
该项目旨在帮助Faculdade 学生从事研究与创新领域的项目。 涵盖的主题: 将网站(HTML和CSS)转换为React项目,包括: React库的工作概念(虚拟DOM,JSX) 接口元素的组件化 路线 API集成(CRUD) 布局: 安装 ...
6.2.5、深入研究page属性范围 6.3、request对象 6.3.1、乱码解决 6.3.2、接收请求参数 6.3.3、显示全部的头信息 6.3.4、角色验证 6.3.5、其他操作 6.4、response对象 6.4.1、设置头信息 6.4.2、页面跳转 ...
6.2.5、深入研究page属性范围 6.3、request对象 6.3.1、乱码解决 6.3.2、接收请求参数 6.3.3、显示全部的头信息 6.3.4、角色验证 6.3.5、其他操作 6.4、response对象 6.4.1、设置头信息 6.4.2、页面...
6.2.5、深入研究page属性范围 6.3、request对象 6.3.1、乱码解决 6.3.2、接收请求参数 6.3.3、显示全部的头信息 6.3.4、角色验证 6.3.5、其他操作 6.4、response对象 6.4.1、设置头信息 6.4.2、页面跳转 ...
6.2.5、深入研究page属性范围 6.3、request对象 6.3.1、乱码解决 6.3.2、接收请求参数 6.3.3、显示全部的头信息 6.3.4、角色验证 6.3.5、其他操作 6.4、response对象 6.4.1、设置头信息 6.4.2、页面跳转 ...
6.2.5、深入研究page属性范围 6.3、request对象 6.3.1、乱码解决 6.3.2、接收请求参数 6.3.3、显示全部的头信息 6.3.4、角色验证 6.3.5、其他操作 6.4、response对象 6.4.1、设置头信息 6.4.2、页面...
6.2.5、深入研究page属性范围 6.3、request对象 6.3.1、乱码解决 6.3.2、接收请求参数 6.3.3、显示全部的头信息 6.3.4、角色验证 6.3.5、其他操作 6.4、response对象 6.4.1、设置头信息 6.4.2、页面跳转 ...
6.2.5、深入研究page属性范围 6.3、request对象 6.3.1、乱码解决 6.3.2、接收请求参数 6.3.3、显示全部的头信息 6.3.4、角色验证 6.3.5、其他操作 6.4、response对象 6.4.1、设置头信息 6.4.2、页面...
6.2.5、深入研究page属性范围 6.3、request对象 6.3.1、乱码解决 6.3.2、接收请求参数 6.3.3、显示全部的头信息 6.3.4、角色验证 6.3.5、其他操作 6.4、response对象 6.4.1、设置头信息 6.4.2、页面...
我将用自己的话语和样本总结我的研究成果。 撰写本文时作者的Web前端功能 站点和管理屏幕可以使用HTML / CSS构建 如果您阅读规范,可以在一定程度上使用CSSFW(Bootstrap ...) 可以使用SCSS 使用JavaScript可以...
这将包括解释它们为何如此重要并研究一些示例。 如果组件的概念和应用程序没有立即单击,请不要担心! 随着我们的前进,了解如何使用它们所需的不同运动部件将落入原处。目标了解React组件创建React组件并显示它们...
10.1 研究模块 145 10.1.1 导入模块 147 10.1.2 查找模块 147 10.1.3 理解模块 148 10.2 创建模块和包 149 10.3 使用类 150 10.3.1 定义面向对象编程 151 10.3.2 创建类 151 10.3.3 扩展已有的类 152 10.4 完成模块 ...
如何像开发人员一样思考和工作:问题解决,研究,工作流程 从一开始的现代ES6 +:箭头功能,解构,散布运算符,可选链接(ES2020)等。 复杂的概念,例如“ this”关键字,高阶函数,闭包等。 如何使用流程图和...