Extjs提供了非常完善的DOM操作方法，可以友善的操作DOM。另外Extjs還可以友善的查詢DOM元素，并把這些DOM元素封裝成Ext.Element對象，通過Element對象我們可以操作DOM元素。下面來看一下Extjs操作DOM的幾個類：
Ext.Element 、Ext.DomHelper、Ext.DomQuery三個支柱性庫。
Ext.Element.get()快捷方式Ext.get()，隻能以dom的id作為參數去擷取Ext.Element對象（Ext.get傳回的結果是Ext.Element對象的執行個體， .dom才是原生的dom）。在Ext中所有元件都是有Id的，這個Id可以是手動指定，也可以是Ext的Id生成機制自動生成。
主要是操作dom。
Ext.DomHelper.append()是一個很常用的方法，值得一提的是由于Ext采用了對象緩存機制，在MVC模式下在不同的tab切換的時候如果重新渲染dom，使用Ext.DomHelper.append()添加的元素不會丢失，但是使用原生或者其他架構（比如jq）就會丢失。這就是我說她像一個的老婆原因之一。看幾個用法：
一、直接字元串
Ext.DomHelper.append(元素id,'<a href="#">你好</a>');
二、對象
Ext.DomHelper.append(元素id,{tag:ul,children:[{tag:li,html:'一個ul清單的第一項'},{...}]});
Ext.DomHelper.insertHtml()另一個很常用的方法
Ext.DomHelper.insertHtml(位置參數,dom,'<a href="#">你好</a>');
位置參數：beforeBegin、afterBegin、beforeEnd、afterEnd
Ext.DomHelper.overwrite(dom的id,'<a href="#">你好</a>');相當于原生的 .innerHtml="";是以是重寫容器中的内容。
var tpl = Ext.DomHelper.createTemplate("<li>{content}</li>");
tpl.overwrite(domID,{content:'内容'});
引用檔案有問題，會報錯
還有另一種用法：
var tpl = new Ext.DomHelper.createTemplate({tag:"li",html:"{content}"});，同樣的報錯...哪位大神路過望指點
如果是清單，那就要借助for循環append了。
Ext.DomQuery 查找dom元素的利器
Ext.query('div')、Ext.query('[id="domId"]')、Ext.query('div：first-child').支援絕大部分的CSS3選擇器
Ext.query() 是Ext.DomQuery.select()的快捷方式， 傳回标準dom。
2021年9月 北京、西安兩地，高薪誠聘 .NET工程師，請私信聯系！
如果認為此文對您有幫助，别忘了支援一下哦！
聲明：本部落格原創文字隻代表本人工作中在某一時間内總結的觀點或結論，與本人所在機關沒有直接利益關系。轉載時請在文章頁面明顯位置給出原文連結。