- 浏览: 13541 次
最新评论
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)
发表评论
-
AJAX(XMLHttpRequest)进行跨域请求方法详解
2012-01-20 10:54 768AJAX(XMLHttpRequest)进行跨 ... -
腾讯WebQQ聊天架构分析1
2012-01-20 10:54 764腾讯WebQQ聊天架构分析1 2010年07月21日 有 ... -
抠出淘宝的菜单树
2012-01-20 10:54 824抠出淘宝的菜单树 2010年08月17日 淘宝登陆用户的 ... -
再谈Iframe的问题
2012-01-20 10:54 662再谈Iframe的问题 2010年1 ... -
vc中出现error LNK2001:unresolved external symbol _WinMain@16的解决方法
2012-01-19 15:52 1465vc中出现error LNK2001:unresolved e ... -
Get help with "Error 711" message
2012-01-19 15:52 731Get help with "Error 711&q ... -
如何让 struts error 标签显示中文
2012-01-19 15:52 590如何让 struts error 标签显示中文 2011年1 ... -
e: sub-process /usr/bin/dpkg returned an error code (1) 出错解决方案-googledroid-博客园
2012-01-19 15:51 1356e: sub-process /usr/bin/dpkg re ... -
spyder online store -gps measurement error_niqdkochyyfr
2012-01-19 15:51 742spyder online store -gps measur ... -
最佳雇主:共同的秘密(上)
2012-01-17 05:33 658最佳雇主:共同的秘密(上) 2011年11月26日 继今 ... -
广东自取其辱 易建联让所有人都伤不起
2012-01-17 05:33 652广东自取其辱 易建联让所有人都伤不起 2011年11月26日 ... -
新书后记 如何不浪费这次危机?
2012-01-17 05:33 713新书后记 如何不浪费这 ... -
关于对金钱的认识
2012-01-17 05:33 575关于对金钱的认识 2011年11月26日 金钱可以买 ... -
理查德??伯恩斯十周年
2012-01-17 05:33 637理查德??伯恩斯十周年 2011年11月26日 &am ... -
传统文化群聊摘录(不定时更新)
2012-01-16 04:30 678传统文化群聊摘录(不定时更新) 2011年12月30日 ... -
墨子管理启发的“天龙八部”
2012-01-16 04:29 555墨子管理启发的“天龙 ... -
皇帝木--识鉴金丝楠木
2012-01-16 04:29 602皇帝木--识鉴金丝楠木 ...
相关推荐
第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”关键字,高阶函数,闭包等。 如何使用流程图和...