Ext JS学习第十二天 Ext基础之操作dom ; get与fly 方法

此文用来记录学习笔记

•嗯!首先,什么是DOM(Document Object Model)
–W3C对DOM的定义:文档对象模型是一个平台,一个中立于语言的应用程序编程接口(API),允许程序访问并更改文档的内容、结构和样式。
–其实DOM是一种通用的模型、不止在我们的HTML中存在,也可以在其他文件中存在,相信你最熟悉的就是XML了吧,其实还有很多...
–DOM的发展也非常的漫长,版本延续,产生了0级DOM、1级DOM、2级DOM和最新的3级DOM,那么相对成熟的就是从2级DOM以后了。每一次版本更新都有非常实用的变化。

节点Node,对于nodeType、nodeName、nodeValue、getAttribute等等一些对加点的定义你一定不会陌生

•对于DOM模型的操作,相信一个个熟悉又可爱的名字你一定知道:
•DOM的访问
–document.getElementById、document.getElementsByTagName、document.getElementsByName、innerHTML、innerText等等一些方式去访问DOM元素
•DOM的CRUD
–createElement、parentNode、childNodes、appendChild、removeChild、replaceChild、inertBefore、firstChild、previousSibling等等一系列操作DOM的方式
•对于DOM的样式
–我也相信你非常的了解,只需要给节点添加一个style属性,我们就可以操作该节点的样式,或者触发事件改变样式,又或者根据需求操作DOM变换不同的动画效果等等,这都离不开style属性。
•好了,对于旧时代的DOM我们暂且放在一边、那么Ext的出现,让以上这些对于DOM的概念变得简单、实用。
•Ext之DOM
–Ext中使用了三个核心的工具类对我们掌握的DOM进行了完美的封装,OK,请记住他们的名字:
–Ext.Element(几乎对DOM的一切进行了彻底封装)
–Ext.DomHelper(嗯,他是一个强大的操控UI界面的工具类)
–Ext.DomQuery(用来进行DOM节点查询)
•Ext.Element常用方法:
•如果你深深迷恋着Ext,那么你一定知道Ext.Element这个类,4.x版本由于进行了底层的重构,从而让我看到了更加简洁清晰的代码,那就是这个js文件:AbstractElement.js,他里面有俩个顶顶大名的函数,让开发者再次感叹Ext底层的强大。他们就是Ext.get和Ext.fly。嗯!请记住他们的名字!!一个方法使用了缓存机制来提升获取DOM节点的效率,而另一个方法则使用了javascript经典的‘享元模式’来提升效率,从而节约内存,更加低碳化。
–Ext.get (Ext.Element.get)
–Ext.fly(Ext.Element.fly)
–Ext.getDom
•获取元素的总结:
–Ext.get比较消耗内存,尽量避免使用。
–Ext.fly虽然比较省内存,但是只能被使用一次。
–Ext.getDom非常适合直接获取页面元素,并返回的就是DOM元素,如果你想操作DOM元素的属性,那这个方法是最好不过的咯
Ext.onReady(function(){

    //Ext.dom.Element
//Ext.get 使用了缓存机制来提升获取DOM节点的效率 Ext.Element //get方法的描述:
/**
* 1 首先去Ext.cache缓存里去查找 ,如果缓存里有,直接返回即可
* 2 如果缓存里没有 ,那再去页面上去查找 , 如果页面里没有,返回null
* 3 如果页面里有,把当前内容加入到缓存里: { id : {data/events/dom} }
* 4 Ext.addCacheEntry加到缓存里的方法
*/
var d1 = Ext.get('d1'); //Ext.Element
alert(d1.dom.innerHTML); //Ext.fly
/**
* fly:使用了javascript经典的‘享元模式’来提升效率,从而节约内存,更加低碳化
* 返回的对象:Fly对象 ,当然你可以理解成为返回的就是Ext封装好的Ext.Element对象
* 注意点:fly由于内部使用了享元模式 所以 只适合一次操作 ,从而节省内存
*/ var d2 = Ext.fly('d2');
d2.dom.innerHTML = 'AAA';
var d3 = Ext.fly('d3');
d3.dom.innerHTML = 'BBB'; //Ext.getDom
/**
* 直接从页面上获取元素的DOM元素
*/
var dom = Ext.getDom('d3'); //HTMLElement
dom.innerHTML="CCCC"; });
上一篇:未能加载文件或程序集“System.Data.SQLite”或它的一个依赖。试图加载格式不正确的程序


下一篇:IM服务器的架构