html+dom+深入,DOM 深入学习 - 1
本文章记录本人在深入学习Javascirpt DOM中看书理解到的一些东西,加深记忆和并且整理记录下来,方便之后的复习。
DOM 版本
w3c 指定的DOM规范包括多个版本,不同的版本(或称知为级别)又包含不同的子规法和模块,不同浏览器对DOM的支持是千变万化的。
DOM0级
在很早的时候市场上已经有了一些不同版本的DHTML规范,主要包括IE和Netscape两个不同的版本。这组DHTML规法规定了一套文档对象、集合、方法和属性。虽然不同的DHTML版本的特性存在差异,但是一些基本的思路和用法还是有章可循的。
DOM1级
1998年10月,w3c 推出了DOM 1.0版本的规范。
这个规法主要是包括两个子规范。
- DOM Core(核心部分):把XML文档设计为树形节点结构,并为这种结构的运行机制定制了一套规法化标准,同时定义了创建、编辑、操作这些文档结构的方法以及属性。
- DOM HTML:针对HTML文档、标签集合、以及与个别HTML标签相关的元素定义了对象、属性和方法。
DOM2级
2000年1月,w3c正式发布更新后的DOM核心部分,并且在这次发布添加了一些新的规范,这次发布的DOM称为2级规范。2003年1月,w3c又正式发布了对DOM HTML子规范的修订,添加了针对HTML 4.01和XHTML 1.0版本文档中的很多对象、属性和方法。这次发布就叫做DOM2.0的推荐版本。
DOM 2.0 Core:添加了更多的特性,如针对命名空间的方法等。
DOM 2.0 HTML:针对HTML的文档结构模型,并添加了一些属性。
DOM 2.0 Event:规定了与鼠标相关的事件和控制机制,但是不包括键盘相关事件和处理部分。
DOM 2.0 Style:提供了访问和操作所有与css相关的样式以及规则的能力。
DOM 2.0 Traversal and DOM 2.0 Range:允许开发人员通过迭代方式访问DOM,以便根据需要对文档进行遍历或者其他的操作。
DOM 2.0 Views:提供了访问和更新文档的表现的能力。
DOM 2.0规法已经是目前各大浏览器主持的主流标准。可惜对ie的支持并不完善。
DOM3级
2014年4月,w3c发布了DOM3.0版本。
DOM 3.0 Core:添加了更多新的方法和新属性。同时也修改了已有的一些方法。
DOM 3.0 Load and Save:提供将XML文档的内容加载到DOM文档中和将DOM文档序列化为XML的文档能力。
DOM 3.0 Validation:提供了确保动态生成的文档的有效性的能力,即如何符合文档类型声明。
清理 DOM 加载流程
一般浏览器加载顺序:
1. 解析HTML结构
2. 加载外部脚本和样式结构表
3. 解析并且执行脚本代码
4. 构造DOM模型
5. 加载图片等外部文件
6. 页面加载完毕
通过上面的加载顺序可以知道,网页头部的脚本(由外部文件加载)会在构造HTML DOM文档之前执行,这就会导致执行脚本无法访问文档结构模型。
如果页面包含许多的外部文件,如大量的图片、视频、音频、动画等文件,可能会延迟脚本的执行事件。为了避免js脚本处于长时间的等待,可以把需要执行的脚本部分放在HTML文档的中间,这样只要在构造DOM后执行到脚本所在的结构位置,就会执行脚本。所以一般建议把js放在页面的底部。
谨慎访问 DOM
访问一个DOM元素是代价比较高的,修改元素的代价更高,因为它们经常导致浏览器重新计算页面的几何变换。在访问或者修改元素最不好的情况下就是使用循环执行操作,特别是在HTML集合中使用循环。
for (var i = 0; i < 15000; i++) {
document.getElementById('here').innerHTML += 'a';
};
上面这段代码的问题就是每一次循环都会去对DOM元素访问两次:一次是读取innerHTML属性能容,第二次是写入它。更有效率的方法是使用局部宾利储存更新后的内容,在循环结束后一次性写入。
var text = '';
for (var i = 0; i < 15000; i++) {
text += 'a';
};
document.getElementById('here').innerHTML += text;
innerHTML 与 DOM 方法
谁的性能比较好
两者的性能都是基本接近,不过几乎所有的浏览器中,innerHTML的速度会更快一些,但是最新的基于webkit内核的浏览器除外。
如何选用
使用innerHTML的好处就是在早期的浏览器上面是显而易见的,但在最新版本的浏览器上面就没有那么的明显。因此,采用哪种方法将取决于用户经常使用的浏览器,以及个人的编码爱好。
对于日常的大多数的操作而言,使用innerHTML和使用DOM差异并不是很大,应当根据代码的可读性、可维护性、团队习惯、以及代码风格来综合决定采用那种风格。
警惕文档遍历中的空格 bug
在遍历DOM元素时候,空格的存在很容易造成误解,因为DOM把空格也作为一个节点进行解析(换行符也算)。
var el = document.documentElement.lastChild.firstChild.nodeName;
可以使用上面的代码去检测DOM的元素。
可以定义一个函数用来清除所有包括包含文本节点。这样当执行文档遍历的时候,就不存在元素之间的空格影响。函数要在文档结构加载完后在执行。
function clean(el) {
var el = el || document,
f = el.firstChild;
while (f != null) {
if (f.nodeType === 3 && /\s/.test(f.nodeValue)) {
e.removeChild(f);
} else if (f.nodeType === 1) {
arguments.callee(f);
}
f = f.nextSibling;
};
}
使用上面函数要注意到是,该函数的功能仅是临时性的清除元素之间的空格,需要在HTML文档的每一次加载是都重新只想你个一遍清除的操作。当然,使用这种方法虽然比较高效,但是在每次遍历文档之前,都需要先执行一次遍历操作,如果文档的结构比较复杂,那么这个操作所消耗的系统资源是不可小视的。
最后,如果文章有什么错误和疑问的地方,请指出。与sf各位共勉!
html+dom+深入,DOM 深入学习 - 1相关推荐
- JAVA与DOM解析器基础 学习笔记
要求 必备知识 JAVA基础知识.XML基础知识. 开发环境 MyEclipse10 资料下载 源码下载 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理 ...
- Vue 源码学习—Virtual DOM(虚拟 DOM)
Virtual DOM Virtual DOM是什么 真实DOM成员 引入原因 作用 Virtual DOM是什么 定义: 普通的js对象来描述DOM对象,不是真实的DOM,顾名思义,称为虚拟DOM ...
- 前端学习之JavaScript DOM以及DOM操作的基础知识
在了解了javascript的语言基础和特性后 javascript真正大放光彩的地方来了--这就是javascript DOM Javascript DOM DOM(Document Object ...
- ihtml2document能不能根据id获取dom_回到基础:什么是DOM及DOM操作?
译者:前端小智 来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...
- html dom节点源码,HTML DOM HTML DOM 节点 - 闪电教程JSRUN
在 HTML DOM 中,所有事物都是节点.DOM 是被视为节点树的 HTML. DOM 节点 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 ...
- 什么是DOM,DOM的作用,以及DOM与JavaScript的关系
一个想学web前端的初学者,如果在知乎中搜索推荐书目的话,得到的答案多数都是:首先,学习htlm+css:第二点就是阅读<JavaScript DOM 编程艺术>这本书. 作为一个初学的小 ...
- 什么是DOM及DOM操作?
什么是 DOM ? DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准. W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本 ...
- 虚拟dom_虚拟DOM与dom diff
什么是虚拟DOM 虚拟DOM是一颗以JavaScript对象(node节点)作为基础的树,用对象属性来描述节点,他是对真实DOM的抽象,通过一些列操作使这棵树映射到真实环境上 虚拟dom就是能代表DO ...
- JS DOM之DOM遍历
JS DOM之DOM遍历 1.什么是DOM遍历? 2.查找父元素 3.查找子元素 4.查找兄弟元素 1.什么是DOM遍历? DOM遍历,可以简单地理解为"查找元素".举个例子,如果 ...
- Vue进阶之Virtual DOM(虚拟DOM) 实现原理
Vue进阶之Virtual DOM(虚拟DOM) 实现原理 Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual D ...
最新文章
- oracle管理 题库,Oracle数据库管理与开发习题集
- Win2003系统安全设置
- awk学习实战-原创
- linux平台下rpm方式和源码包方式安装mysql5.7
- c语言case后面多字符,多SWITCH-CASE结构时的C语言对象方式化解
- 求最长回文串-从动态规划到马拉车之路(下)
- python画折线图-手把手教你Python yLab的绘制折线图的画法
- loadrunner中定义数组
- opencv /c++学习
- PyQt4安装使用以及pycharm环境配置
- 最近的收获以及清明节的安排
- Java实现坦克大战小游戏
- 天龙八部荣耀版体验服服务器未响应,《天龙八部荣耀版》创新竖版手游官网-合区来了!体验服合区测试解析...
- Oracle备份与恢复
- Linux防火墙管理
- 打开 codeblocks 出现 ntvdm.exe 停止工作
- 离散数学——用c/c++求命题公式的主范式
- Hexo个人博客搭建教程
- Android TextView垂直滚动,并精准定位到最后一行
- iPhone 4与iPad开发基础教程
热门文章
- Castor xsd生成java_java – Castor可以处理从基础XSD导入的多个XSD生成类吗?
- Python | 重命名现有文件(os.rename()方法的示例)
- Java SecurityManager checkAwtEventQueueAccess()方法与示例
- 图文并茂的聊聊Java内存模型!
- 查询附近的人——GEO
- Windows 创建符号链接
- Android木马分析实验,Android木马简介与分析
- 发现了imageio文档中有代替scipy.misc的说明
- python爬虫加密空间_Python爬虫进阶必备 | XX同城加密分析
- 电脑手写输入法_百度输入法“手写输入”为什么不是老年人的专利?AI的进步...