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 ...
最新文章
- Java程序的运行原理 用记事本编写Java代码
- 快速创建 shell脚本
- Flink On Yarn模式,为什么使用Flink On Yarn?Session模式、Per-Job模式、关闭yarn的内存检查,由Yarn模式切换回standalone模式时需要注意的点
- 动态分区分配的“首次适应算法_kafka集群关于资源分配的手册
- 装mysql最后一步没响应_解决MySQL安装到最后一步未响应的三种方法
- 深度学习(03)-- CNN学习
- mysql 5.7 redo replacation_mysql replace
- 话说P2P理财纷纷暴雷之后,那些投资者的钱去了哪里?
- Android studio错误:module not specified
- 内存图片IOS app启动动画的实现
- 深度IP转换器高匿名8级加密企业级专用IP软件
- c语言实验报告模板电子版,c语言实验报告模板1.pdf
- Visual Studio添加Numpy
- 软件工程——数据流图转换成软件结构图
- GPS导航知识——DGPS
- 食品和饮料销售预测分析
- 在数据库中存储IP地址
- Linux入门---环境搭建(腾讯云服务器)、XShell远程登陆Linux
- 微信小程序:装B神器P图修改微信流量主小程序源码下载趣味恶搞图制作免服务器域名
- 深度学习解决机器阅读理解任务的研究进展