Ext Core核心功能介绍（上）-优快云博客

本文链接：https://blog.youkuaiyun.com/codeyf/article/details/42529751

这篇博客主要介绍了Ext Core的核心功能，包括获取HTMLElement节点的Ext.Element实例、CSS样式操作、DOM查询与遍历以及DOM操作。内容涵盖Ext.Element的各种方法，如创建子元素、删除元素、获取尺寸以及CSS样式设置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext Core为了实现轻量化，将Ext中的UI部分和与之相关的数据处理部分剔除了，只保留了DOM操作和遍历、Ajax、事件处理、动画、模板、面向对象机制等内容。

1 Ext.Element

在一个网页文档里包含了许多HTML标签，而这些HTML标签在DOM树中会变成以改革HTMLElement，从而便于脚本的引用。

由于浏览器DOM操作的差异，为了实现Web框架的跨浏览器特性，每个框架都会构建一个新类，用来操作和遍历DOM树，而在Ext框架中实现该功能的类就是Ext.Element。

Ext.Element类主要方法大致可归纳为以下几点：

CSS样式操作
DOM查询与遍历（例如：query,select,findParent）
DOM操作（例如：createChild,remove）
尺寸大小操作（例如：getHeight,getWidth）

1.1 获取HTMLElement节点的Ext.Element实例

在Ext中，可以通过Ext.get方法获取HTMLElement节点的Ext.Element实例，其语法如下：

var el=Ext.get(el);  //el可以为节点id,DOM节点或已存在的Element

使用Ext.get会创建一个Ext.Element的实例，并可在后期引用时使用。如果不需要创建这个实例，只是对HTMLElement执行一次性的操作，那么可以使用Ext.fly方法。Ext.fly方法并不创建Ext.Element实例，只是利用全局共享的Ext.Element实例进行操作，其语法如下：

Ext.fly(el).getHeight(); //el可以为节点id、DOM节点

如果要将Ext.Element实例赋值给一个变量，然后在后续代码中引用，一定要使用Ext.get方法，不要使用Ext.fly方法。因为全局共享的Ext.Element实例有可能被后续代码修改，最终得不到想要的结果，例如：

var el=Ext.fly("id1");
Ext.fly("id2").hide();
el.hide();

上面的代码本来是要隐藏id为"id1"和"id2"的HTML标签，但是第二行已经修改了全局共享实例，el变量的对象已经变成"id2"，所以运行第3行时，并不能隐藏"id1"。

Ext.fly方法主要是为了减少内存的使用。

如果只想返回HTMLElement对象，可使用Ext.getDom方法，语法格式如下：

var el=Ext.getDom(el); //el可以为节点id，DOM节点或已经存在的Element

在使用Ext.Element操作DOM节点本身的属性和方法时，下面的写法是错误的，造成这样错误的原因是吧Ext.Element对象当成了THMLElement对象

var el=Ext.get("elId");
el.innerHTML="Hello world";

正确的写法是：

var el=Ext.get("elId");
el.dom.innerHTML="Hello world";

1.2 CSS样式操作

Ext.Element提供了11中操作样式方法

（1）addClass:为element增加样式，使用方法如下：

Ext.fly('elId').addClass('elCss');  //只增加一个样式
Ext.fly('elId').addClass(['elCss1','elCss2','elCss3']);  //增加多个样式

（2）radioClass:与addClass类似，区别在于，该方法会移除相同的样式类

（3）removeClass:移除一个或多个样式类，其方法可参考addClass

（4）toggleClass:样式类开关。如果element已存在某个样式类，执行该方法将移除该样式类；如果不存在，则增加该样式类。

（5）hasClass:检查element是否已应用指定的样式类，其使用方法如下：

if(Ext.fly('elId').hasClass('elCss'))
{
     //已应用类elCss时执行
}

（6）replaceClass:替换一个样式类，其使用方法如下：

Ext.fly('elId').replaceClass('elCss1','elCss2');  //使用样式类elCss2替换elCss1

（7）getStyle:返回element的某个样式属性值，其使用代码如下：

var color=Ext.fly('elId').getStyle('color');

（8）setStyle:设置样式属性，其使用方法如下：

//只设置一个属性值
Ext.fly('elId').setStyle('color','#FFFFFF');  
//设置多个属性值
Ext.fly('elId').setStyle({
   color:'red',
   background:'yellow',
   font-weight:'bold'
});

（9）getColor:根据传送的属性返回element的颜色值，例如传送"background-color"，则返回背景颜色。无论颜色是使用RGB法还是3位十六进制法设置的，都会以6位十六进制格式返回。使用预定义颜色表示法设置的颜色值，会返回预定义的颜色名称。使用方法如下：

//背景颜色为rgb(221,221,221)
var bgColor=Ext.fly('elId').getColor('background-color');
//返回"#dddddd"
//颜色为#ddd
var color=Ext.fly('elId').getColor('color');
//返回"#dddddd"
//颜色为yellow
var color=Ext.fly('elId').getColor('color');
//返回"yellow"

（10）setOpacity:设置element的Opacity值，使用方法如下：

Ext.fly('elId').setOpacity(.5);
Ext.fly('elId').setOpacity(.5,true); //使用动画过度
Ext.fly('elId').setOpacity(.5,{duration:.35,easing:'easeIn'});  //使用指定动画样式过渡

（11）clearOpacity:清除element的Opacity设置，使用方法如下：

Ext.fly('elId').clearOpacity();

1.3 DOM查询与遍历

Ext.Element提供了13种DOM查询与遍历方法，下面是这些方法的功能及其使用方法：

（1）is:判断当前element是否与选择器选择的element匹配，其使用方法如下：

var el=Ext.get('elId');
if(el.is('div.elCss'))
{
    //如果匹配，代码
}

（2）findParent:从当前节点开始查找与选择器匹配的父节点（包含当前节点）。注意该方法默认返回的是HTMLElement对象，不是Ext.Element对象。如果需要返回Ext.Element对象，则需要设置第三个参数为true，其使用方法如下：

var el=Ext.fly('elId').findParent('div');
var el=Ext.fly('elId').findParent('div',4);  //定位到在当前节点的第4层父节点
var el=Ext.fly('elId').findParent('div',null,true);

（3）findParentNode:从当前节点开始查找与选择器匹配的父节点，该方法的使用方法参考findParent方法。

（4）up:是findParentNode方法的缩写，不过该方法返回的是Ext.Element对象，其使用方法请参考findParent。

（5）select:通过选择器选择当前节点下的子节点，该方法的返回值是Ext.CompositeElement对象，其使用方法如下：

Ext.fly('elId').select('div');
//如果希望返回的节点是Ext.Element对象，需要设置第2个参数为true
Ext.fly('elId').select('div',true);

（6）query:通过选择器选择DOM节点，该方法返回包含DOM节点的数组，其使用方法如下：

Ext.fly('elId').query('div');
//上面这句也可以使用以下语句代替
Ext.query('div',Ext.getDom('elId'));

（7）child:通过选择器返回一个当前节点的子节点，默认返回的是Ext.Element对象，如果需要返回HTMLElement对象，第2个参数需要设置为true，其使用方法如下：

Ext.fly('elId').child('div');  //返回Ext.Element对象
Ext.fly('elId').child('div',true); //返回HTMLElement对象

（8）down:通过选择返回一个当前节点的直接子节点，该方法与child方法类似，唯一不同的是，选择器不能包含节点id,其使用方法可参考child方法。

（9）parent:返回当前节点的父节点，其使用方法如下：

Ext.fly('elId').parent();  //返回Ext.Element对象
Ext.fly('elId').parent('',true);  //返回HTMLElement对象
Ext.fly('elId').parent('div');  //也可以通过选择器选择

（10）next:返回与当前节点同层的、除了文本外的下一个节点。该方法的使用方法与parent方法类似。

（11）prev:返回与当前节点同层的、除了文本外的上一个节点。该方法的使用方法与parent方法类似。

（12）first:返回与当前节点同层的第一个节点。该方法的使用方法与parent方法类似。

（13）last:返回与当前节点同层的最后一个节点。该方法的使用方法与parent方法类似。

1.4DOM操作

（1）appendChild:在当前节点里追加子节点，其使用方法如下：

var el=Ext.get('elId1');
Ext.fly('elId').appendChild('elId1'); //通过id追加
Ext.fly('elId').appendChild(el);  //与上一句作用一样，通过Ext.Element追加
Ext.fly('elId').appendChild(['elId1','elId2']);  //通过数组添加
Ext.fly('elId').appendChild(el.dom); //通过HTMLElement追加
Ext.fly('elId').appendChild(Ext.select('div'));  //通过CompositeElement追加

（2）appendTo:将当前节点追加到某个节点，其使用方法如下：

var el=Ext.get('elId1');
Ext.fly('elId').appendTo('elId1'); //通过id追加
Ext.fly('elId').appendTo(el); //与上一句作用一样，通过Ext.Element追加

（3）insertBefore:将当前节点插入某个节点之前。使用方法参考appendTo方法。

（4）insertAfter:将当前节点插入某个节点之后。使用方法参考appendTo方法。

（5）insertFirst:在当前节点中插入一个子节点并作为当前节点的第一个子节点。

（6）replace:使用当前节点替换某个节点。使用方法参考appendTo方法。

（7）replaceWith:将当前节点替换为某个已存在节点或新节点。其使用方法可参考insertFirst方法。

（8）createChild:在当前节点追加或在指定的节点前插入1个由DOMHelper定义的新节点。使用方法如下：

var el=Ext.get('elId');
var c={
  tag:'div',
  cls:'box',
  html:'hello'
};
//追加一个子节点
el.createChild(c);
//在第一个子节点之前插入
el.createChild(c,el.first());

（9）wrap:在当前节点外绑定一个有DOMHelper创建的父节点。使用方法如下：

//假设elid的html代码为：<div id='elId'>test</div>
Ext.fly('elId').wrap();
//执行上面的代码后，html代码变成：
//<div id="随机创建的id"><div id="elId">test</div></div>
Ext.fly('elId').wrap({
  tag:'p',
  id:'elId1',
  html:'test'
});
//执行后html代码变成：
//<p id="elId1">new test<div id="elId">test</div></p>

（10）insertHTML:在当前节点插入HTML代码。该方法需要指定插入位置（beforeBegin、beforeEnd、afterBegin和afterEnd）。该方法默认返回HTMLElement对象，如果需要返回Ext.Element对象，需要设置第3个参数为true。其使用方法及插入的位置如下介绍：

假定当前的html代码如下：

<ul id="elId">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

执行以下代码（位置是"beforeBegin")：

Ext.fly('elId').insertHTML('beforeBegin','<p>插入的代码</p>');

则结果将是以下代码：

<p>插入的代码</p>
<ul id="elId">
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

如果执行以下代码（位置是"afterBegin"):

Ext.fly('elId').insertHTML('afterBegin','<p>插入的代码</p>');

则结果将是以下的代码：

<ul id="elId">
  <p>插入的代码</p>
  <li>1</li>
  <li>2</li>
  <li>3</li>
<ul>

（11）remove:删除当前节点。使用方法如下：

Ext.fly("elId").remove();

（12）removeNode:在DOM树中删除一个节点。使用方法如下：

Ext.removeNode(node); //node为HTMLElement对象

（13）load:使用Ajax调用远程数据更新节点内容。使用方法如下：

Ext.fly('elId').load({url:'test.aspx'});

（14）getUpdater:返回当前节点的Ext.Updater对象。使用方法如下：

var u=Ext.fly('elId').getUpdater();
//通过update方法更新节点内容
u.update({
   url:'test.aspx'
});