javascript系列之DOM(二)





原生DOM扩展

我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点。我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一些优秀
的DOM操作API。可见原生的一些方法和属性,还不能很灵活快捷的来完成我们所希望的操作。下面将总结出总结出几种很实用的扩展方法。包括
after()和before(),

A:after()和before()


 1 function after(elem){
2 if(this.parentNode){
3 this.parentNode.insertBefore(elem,this.nextSibling)
4 }
5 }
6 function before(elem){
7 if(this.parentNode){
8 this.parentNode.insertBefore(elem,this)
9 }
10 }

这里的after()和
before()方法主要是为了快速解决this,this.nextSibling之间的空间问题。方便我们灵活的插入元素节点。两种方法的核心当然是insertBefore(),它是父节点和子节点,子节点之间联系的重要桥梁。

B:text()


 1 function text(elem){
2 var str="";
3 //判断是否有子节点
4 elem=elem.childNodes||elem;
5 for(var i=0;i<elem.length;i++){
6 //若果不是元素节点,追加文本值
7 str+=elem.nodeType!=1?elem.nodeValue:text(elem.childNodes[i]);
8 }
9 return str;
10 }

text()获取匹配元素集合(他的后代)中每个元素的文本内容,对于文本节点nodeValue属性为其文本内容,对于属性节点nodeValue为其属性值,他对于元素节点是不可用的。





DOM性能优化

在DOM操作中,我们再完成其所期望实现的功能的同时,我们最应该关心的就是优化问题。DOM操作很耗费性能,相信各位前端儿们早有耳闻,在前文中提到的
createDocumentFrament()算是一个引子。DOM操作的效率为什么会这么低?这么慢?为什么说DOM操作是性能优化的主攻点?因为有
reflow和repaint这两个小屁孩的存在。而且浏览器为了保证执行结果的准确性(太宠这两个孩子了),他们想要什么就立马去实现(同步执行)。要
是他两贪得无厌,操作的波及范围比较大,次数比较频繁时。这后果可就够喝一壶的了。有必要先介绍下这两个坏小子: reflow
意味着结构的 改变,比如一堆元素,改变其中一个的宽高,那么相应的所有元素的位置都要改变.repaint意味着样式的改变比如div调整了背景色等,但是位置不
变,只改变我们操作的元素.所以通常来看repaint的代价要远小于reflow,比它斯文点,速度也更快.

我们既然发现了问题的根源所在,就是去解决这些问题。毕竟这两个小屁儿又不是咱的亲儿子,该打屁股可不能客气。把我的一个原则当然就是尽量减少DOM操作了,不给他们更多放肆的机会。这里有几条原则。首先就从createDocumentFrament()说起吧!

A:createDocumentFrament()

实例见前文,试想若果我们没有个这“盒子”,那document每构造一个元素,页面就要重构依次,后果可想而知。我们先把药添加的元素包裹起来,寄存在这个预定的盒子(文档碎片)里,然后一次性添加到文档中,jQuery就是这么干的。

B:display:none

将display设置为"none",只是把这个元素从当前的DOM结构暂时删除起来,
让其不可见。这样私下就可以好好调戏他了,这个结构是个大容器,可以干很多事情,比如说添加一堆元素。一切完毕之后恢复。这样它只是一次重构。

C:class

这个还是比较容易理解的,修改属性(样式居多)时,你逐一修改要访问很多次,而替换class就相当于批量操作了,访问一次DOM就可以了,当然性能提高了.

D:变量保存

用变量保存DOM对象而不是多次获取,最典型的莫过于for(var i=0;i<list.length;i++)和for(var
i=0,l=list.length;i<l;i++)效率比较,每次循环都要去获取长度可是很伤神又伤身的哦。你平时写的时候注意了这个细节了
嘛?

javascript系列之DOM(二),布布扣,bubuko.com

时间: 04-26

javascript系列之DOM(二)的相关文章

javascript系列之DOM(一)

原文:javascript系列之DOM(一) DOM(document object moudle),文档对象模型.它是一个中立于语言的应用程序接口(API),允许程序访问并修改文档的结构,内容和样式.也就是一切语言(js,php 等)对web的操作是建立在DOM的基础之上的.行为的发生,首先必须获取文档中的一个对象作为其载体. DOM发展史 在漫长的互联网发展史上DOM一共经历了四个阶段.当前,我们正处在DOM 3阶段. DOM 0 :不是W3C规范,只是Netscape Navigator

Kidney日拱一卒JavaScript系列Chapter9 DOM

Chapter 9 文档对象模型 1.DOM树 DOM是HTML和XML文档提供的一系列API的集合. DOM将HTML和XML文档描绘成一个由多层次节点构成的树结构,文档中所有的元素都是一个节点. 树结构的根节点(又称文档元素)有且只有一个. HTML文档的根节点始终是<html>,XML文档则可以是任何元素. 1.1 使用nodeType检测节点类型 节点(node)一共有12种类型,每种类型用一个1~12之中的数字表示. 数字 表达式 说明 1 Node.ELEMENT_NODE 元素类

javascript系列之DOM(三)---事件

事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定元素,按下某些按键,改变窗口.当然还可能是浏览器上某个页面加载完毕.通过 javascript你可以监听特定事件的发生,为事件绑定处理函数. DOM事件流 在DOM中,当某一个特定的HTNL元素产生事件时,该事件会在该元素节点与根节点之间按特定的顺序传播,所经过的节点都会监听到该事件(但不一定执行该 事件对应的动作,因为未绑定事件处理函数),这个传播过程

深入理解JavaScript系列(24):JavaScript与DOM(下)

介绍 上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点.本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型. 本文参考:http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-lesson-2/ 操作元素 上一章节我们提到了DOM节点集合或单个节点的访问步骤,每个DOM节点都包括一个属性集合,大多数的属性都提供为相应的功能提供了抽象.例如,如果有一个带有

深入理解JavaScript系列(结局篇)(转载)

深入理解JavaScript系列(结局篇) 介绍 最近几个月忙得实在是不可开交,终于把<深入理解JavaScript系列>的最后两篇“补全”了,所谓的全是不准确的,因为很多内容都没有写呢,比如高性能.Ajax安全.DOM详解.JavaScript架构等等.但因为经历所限,加上大叔希望接下来写点其它东西,所以此篇文字就暂且当前完结篇的总结吧,以后有时间的话,可以继续加上一些未涉及的专题内容. 网络文章来源 本系列文章参考了大量的互联网网站,在此向各位网站拥有者.博主.提到的以及未提到的作者们说一

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

深入理解JavaScript系列 --汤姆大叔

深入理解JavaScript系列文章,包括了原创,翻译,转载,整理等各类型文章,如果对你有用,请推荐支持一把,给大叔写作的动力. 深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点 深入理解JavaScript系列(2):揭秘命名函数表达式 深入理解JavaScript系列(3):全面解析Module模式 深入理解JavaScript系列(4):立即调用的函数表达式 深入理解JavaScript系列(5):强大的原型和原型链 深入理解JavaScript系列(6

全栈JavaScript之路( 二十三 )DOM2、DOM3, 涉及XML命名空间的扩展(一)

<!DOCTYPE html> <xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"> <head> <title>Example XHTML page</title> </head> <body> <s:svg xmlns:s="http://www.w3.org/2000/svg" version="1.1&