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";
    
    
    
});