摘要：本文章记录本人在深入学习中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。级年月，正式发布更新后的核心部分，并且在这次发布添加了一些新的规范，这次发布的称为级规范。
本文章记录本人在深入学习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各位共勉！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85693.html
摘要：使用局部变量来访问集合元素访问任何类型的，当同一个属性或者方法被访问同一次以上时，最好使用一个局部变量缓存该成员。当遍历一个集合的时候，第一个要优化的就是将集合引用存储在局部变量中，并在循环之外缓存属性。 本文章记录本人在深入学习Javascirpt DOM中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。 减少 DOM 重绘和重排的次数 简单了解重绘和重...
摘要：前言以深入学习技术栈为线索，记录下学习的重要知识内容。要传入时，必须使用属性表达式。如果要使用自定义属性，要使用前缀这与标准是一致的。 前言 以《深入学习react技术栈》为线索，记录下学习React的重要知识内容。本系列文章没有涵盖全部的react知识内容，只是记录下了学习之路上的重要知识点，一方面是自己的总结，同时拿出来和在学习react的人们一块分享，共同进步。 正文 一：rea...
摘要：前言接下来让我们进入新的章节漫谈。正文一事件系统的事件系统事件系统符合标准，不存在任何兼容性问题，并且与原生的浏览器事件一样有同样的接口。所有的事件都自动绑定到最外层。组织事件冒泡的行为只适用于合成系统中，且没办法阻止原生事件冒泡。 前言 接下来让我们进入新的章节：漫谈React。本篇文章主要讲React事件系统和表单操作。 正文 一：事件系统 1.react的事件系统react事件系...
摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。 前言 上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...
摘要：写在前面目前专注深入学习，特花了点时间整理了一些前端学习相关的书籍。大致分为以下大系列系列系列基础系列应用系列进阶系列类库系列框架系列。这些书籍在这里免费提供下载，有兴趣的一起学习。 写在前面 目前专注深入JavaScript学习，特花了点时间整理了一些前端学习相关的书籍。 大致分为以下7大系列：CSS系列、DOM系列、JavaScript基础系列、JavaScript应用系列、Ja...
阅读 2518·2023-04-25 17:33
阅读 623·2021-11-23 09:51
阅读 2932·2021-07-30 15:32
阅读 1371·2019-08-29 18:40
阅读 1882·2019-08-28 18:19
阅读 1443·2019-08-26 13:48
阅读 2216·2019-08-23 16:48
阅读 2261·2019-08-23 15:56
