Ext Core是一款和jQuery媲美的轻型JS库，基于MIT许可。对于Dom的操作，我个人还是比较喜欢用jQuery。当然如果项目中用的是ExtJS框架，也就没必要多引用一个jQuery，Ext Core是ExtJS框架的一个小子集。如果仅仅使用Ext Core的功能，则只需引入builds文件夹下的一个ext-core.js就可以了，无需css等其他文件。
由于浏览器DOM操作的差异，为了实现Web框架的跨浏览器特性，每个JS框架都会构建一个新类来操作DOM，在Ext Core中实现该功能的类就是Ext.Element。Ext.Element类中的方法很多，主要方法大致可归为这么几类：DOM查询和遍历、DOM操作、大小与定位和CSS样式操作。对于这些，我们可以在实际开发用到的时候去查看。为了开发效率，应该对Ext Core的一些常用功能函数做一个大致的了解。下面将分别进行简单介绍。
获取元素
第一种方式是Ext.get方法，它获取html节点并会创建Ext.Element实例：
var el = Ext.get("elId"); 使用Ext.get会创建元素实例，并可在后期引用时使用。
另一种方式称为，是一种省内存的模式。如果是对元素的一次性操作，可使用Ext.fly方法。Ext.fly方法不会创建Ext.Element实例，实际它是利用全局共享的Ext.Element实例进行操作。一般在对元素的某个属性一次性的取值或设值时使用：
Ext.fly("elId").getHeight();//下面将div1存储起来是无效的。var div1 = Ext.fly('div1');Ext.fly('div2').frame();//下面代码改变的是div2的高度。div1.setHeight(200); 另外，有一个容易与上面两个方法混淆的是Ext.getCmp方法，该方法用来取得Ext组件。如：
var text = new Ext.form.TextField({ id: "text", renderTo: Ext.getBody()});Ext.getCmp("text").setWidth(200); Ext的组件是Ext对一个或多个html元素进行封装的集合，组件和元素有着本质的区别。
对于Ext容器组件（如Ext.Toolbar、Ext.form.FormPanel等）必须通过Ext.getCmp()获取。但对于非容器组件，可以根据Ext组件Id通过Ext.get和Ext.fly获取该组件对应的Ext.Element实例。如：
var text = new Ext.form.TextField({ id: "text", renderTo: Ext.getBody()});Ext.fly("text").setWidth(200); 虽然能通过fly或get获取到Ext组件对于的Ext.Element实例，但显然这实例不具有Ext组件的功能，比如上面代码Ext.fly("text")不能调用setValue()方法。关于Ext组件，我会在后续文章中对其进行专门的讲解。
上面三种获取元素的方法，不管是Ext组件编程还是DOM编程，都会经常用到。
还有一种Ext.getDom，它是用来获得普通dom元素的，也是将Ext.Element转换为普通dom元素的一种方式。它的参数可以是元素id，也可以是Ext.Element对象。
var div = Ext.get('div1');var el = Ext.getDom('div1');var el = Ext.getDom(div); 操作DOM和CSS
Ext.Element的查询和遍历方法不多，下面简要介绍几个方法，了解一下即可。
is：判断当前元素是否与选择器选择的元素匹配。
if (Ext.get('test').is('div.cls')) { alert("test is div.cls");} findParent：从当前节点开始查找与选择器匹配的父节点（包含当前节点）。要注意该方法默认返回的是HTMLElement对象，不是Ext.Element对象。如果需要返回Ext.Element对象，则需要设置第3个参数为true。
//返回HTMLElementvar el = Ext.fly('elId').findParent('div'); //定位到在当前节点的第4层父节点 var el = Ext.fly('elId').findParent('div', 4);//返回Ext.Element var el = Ext.fly('elId').findParent('div', null, true); up：是findParentNode方法的缩写，不过该方法返回的是Ext.Element对象。
select：通过选择器选择当前节点下的子节点，该方法的返回值是Ext.CompositeElement对象。
Ext.fly('elId').select('div'); //如果希望返回的节点是Ext.Element对象，需要设置第2个参数为true Ext.fly('elId').select('div',true); 注意，Ext.CompositeElement对象是不允许直接通过索引访问其内部元素的，要访问内部元素需要使用item方法。注意，是item方法，不是属性，要使用括号（而不是中括号）包含索引，要遍历对象中的元素可使用each方法。通过getCount方法可获取元素的总数。要定位元素可使用indexOf方法。
query：通过选择器选择DOM节点，该方法返回包含DOM节点的数组。
Ext.fly('elId').query('div'); // 上面这句也可以使用以下语句代替 Ext.query('div', Ext.getDom('elId')); child：通过选择器返回一个当前节点的子节点，默认返回的是Ext.Element对象，如果需要返回HTMLElement对象，第2个参数需要设置为true。
Ext.fly('elId').child('div'); //返回Ext.Element对象 Ext.fly('elId').child('div',true); //返回HTMLElement对象 down：通过选择返回一个当前节点的直接子节点，该方法与child方法类似，唯一不同的是，选择器不能包含节点id，其使用方法可参考child方法。
parent：返回当前节点的父节点。该方法通过设置第 2 个参数可控制返回的是Ext.Element对象还是HTMLElement对象。
Ext.fly('elId').parent(); //返回Ext.Element对象 Ext.fly('elId').parent('',true); //返回HTMLElement对象 //也可以通过选择器选择 Ext.fly('elId').parent('div'); 另外还有 next、prev、first、last等方法，具体可以查看文档。
Ext.Element提供操作CSS样式很方便，来看几个常用的方法。
addClass：为元素增加样式类。
//只增加一个样式类 Ext.fly('elId').addClass('cls1'); //增加多个样式类 Ext.fly('elId').addClass(['cls1', 'cls2',..., 'clsN']); toggleClass：样式类开关。如果element已存在某个样式类，执行该方法将移除该样式类；如果不存在，则增加该样式类。
Ext.fly('elId').toggleClass('elCss'); setStyle：设置样式属性。
//只设置一个属性 Ext.fly('elId').setStyle('color', '#FFFFFF'); //设置多个属性 Ext.fly('elId').setStyle({ color: 'red', background: 'yellow', font-weight: 'bold' }) 其它方法，有hasClass、replaceClass、getStyle、getColor等，用起来都很简单，就不一一介绍了。
Ext.DomHelper操作DOM
Ext.DomHelper是一个用来生成HTML片段的类，它主要通过定义一个JSON格式的数据生成HTML片段，对开发人员来说，非常灵活方便。它的数据结构主要包括以下4个属性：
tag：元素的标签，例如div、span之类。
children：由元素的子元素组成的数组，可以通过该属性不断增加子元素。
cls：元素的CSS类名。
html：元素的innerHTML属性，如果不想使用children属性定义元素的内部HTML内容，可使用该属性代替。
来看一个示例：
//JSON格式的数据//也可以将下面的children属性替换成 html: '
上面代码会生成下面这样一段html代码片段：
使用Ext.DomHelper的优点是代码简单明了、容易维护。Ext.DomHelper操作DOM的方法还有appendChild、appendTo、insertBefore、insertFirst等，这些方法的意义与jQuery中操作Dom的方法是一样的。
尺寸与大小
对于某个元素在页面上的位置和元素尺寸大小的操作，Ext Core也封装了很多方法，用起来也很方便。这些没什么好介绍的，直接看例子吧。
尺寸大小：
//以默认的动画设置元素高度Ext.fly('elId').setHeight(200, true);//以自定义动画设置元素的高度Ext.fly('elId').setHeight(200, { duration: 0.5, //持续半秒 //动画过后做一些操作 callback: function () { this.update("结束"); }});//得到某个元素的高度var height = Ext.fly('elId').getWidth(); 还有一些方法，如getPadding、getBorderWidth等极少用的方法。
定位的设置和取值方法和尺寸设置取值基本一样：
Ext.fly('elId').setX(200, { duration: 0.5, //持续半秒 //动画过后做一些操作 callback: function () { this.update("结束"); }}); 和定位有关的方法还有getX、getY、getXY、getTop、getLeft等等。具体可查看。
结束语
其实真正用ExtJS框架开发B/S应用的时候，很少会对Dom进行直接操作。ExtJS是基于组件的，本身有着强大的布局功能。比如要做一个弹出的登录界面，一个Window组件几个TextField组件再加两个按钮组件就做好了，而且画面风格统一，整齐美观，基本上不需要用到Div+CSS布局，也不会在一个Ext容器组件中加个html元素如<input type='button'/>。也就是说，实际应用中，Ext Core中的大部分功能不会和Ext组件混合使用。
但如果选择了ExtJS框架开发B/S应用，还是有必要了解和学习一下ExtJS框架的Ext Core部分的。
参考：
《Ext JS 高级编程》
《Ext Core 手册》