首页 > 代码库 > Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法
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"; });
Ext JS学习第十二天 Ext基础之操作dom ； get与fly 方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。