郑州百度网站建设,网站欧美风格,上海弘韬建设发展有限公司网站,重庆好的网站制作公司哪家好本文章记录本人在深入学习Javascirpt DOM中看书理解到的一些东西#xff0c;加深记忆和并且整理记录下来#xff0c;方便之后的复习。DOM 版本w3c 指定的DOM规范包括多个版本#xff0c;不同的版本(或称知为级别)又包含不同的子规法和模块#xff0c;不同浏览器对DOM的支持…本文章记录本人在深入学习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各位共勉
