8、ExtJs——Ext基础架构--Ext操作DOM
山凌
什么是DOM（Document Object Model）？这个看前面的html-DOM
这里简要概述
- 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、insertBefore、firstChild、previousSibling等等
对于DOM的样式：
- 只需要给节点添加一个style属性，就可以操作该节点的样式，或者处罚事件改变样式，又或者根据需求操作DOM变换不同的动画效果等等。这都离不开style属性
Ext之DOM
- Ext中使用了三个核心的工具类对我们掌握的DOM进行了完美的封装：
- Ext.Element（几乎对DOM的一切进行了彻底封装）
- Ext.DomHelper（是一个强大的操控UI界面的工具类）
- Ext.DomQuery（用来进行DOM节点查询）
Ext.Element这个类是Ext封装底层HTML的最核心的类了。
Ext.Element常用方法：两个最有名的函数：Ext.get和Ext.fly两个函数，一个方法使用了缓存机制来提升获取DOM节点的效率，而另一个方法则使用了javaScript经典的‘享元模式’来提升效率，从而节约内存。
- Ext.get（Ext.Element.get）
- Ext.fly（Ext.Element.fly）
- Ext.getDom
页面代码：
<body>
<input type="button" id="btn" value="点击" > <br>
<div id="d1" align="center">我是d1</div>
<div id="d2" align="center">我是d2</div>
<div id="d3" align="center">我是d3</div>
</body>Ext.onReady(function(){
//Ext.dom.Element
//Ext.get 使用了缓存机制来提升获取DOM节点的效率，返回的是Ext.Element
var d1 = Ext.get('d1');
//get方法的描述：
/**
* 1、首先去Ext.cache缓存里去找，如果缓存里有，直接返回即可
* 2、如果缓存里没有，再去页面上查找，如果页面里没有，返回null
* 3、如果页面有，把当前内容加入到缓存中：{id：{data/events/dom}}
* 4、Ext.addCacheEntry加到缓存的方法
*/
alert(d1.innerHTML); //alert undefined,因为d1是一个Ext.Element对象，Ext.Element没有innerHTML
alert(d1.dom.innerHTML); //alert 我是d1
//Ext.fly
/**
* 使用了享元模式
* 返回的对象：Fly对象(可以认为是Ext封装好的Ext.Element对象)
* 注意点：fly由于内部使用了享元模式，所以，只适合一次操作，从而节省内存
*/
var d2 = Ext.fly('d2');
d2.dom.innerHTML = 'dadadad';
var d3 = Ext.fly('d3');
d3.dom.innerHTML = 'bbbbbbbbb';
/**
var d2 = Ext.fly('d2');
var d3 = Ext.fly('d3');
d2.dom.innerHTML = 'dadadad';
d3.dom.innerHTML = 'bbbbbbbbb';
上述代码只改变最后一个赋值
*/
//Ext.getDom
var dom = Ext.getDom('d3'); //HTML Element
dom.innerHTML = 'dddddssssssss';
});获取元素的总结：
- Ext.get比较消耗内存，尽量避免使用。
- Ext.fly虽然比较省内存，但是只能被使用一次
- Ext.getDom非常适合直接获取页面元素，并返回的就是DOM元素，如果你想操作DOM元素的属性，这个方法是最好不过的。
Ext.dom.Element的查询系方法：
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'我的面板',
width:'100%',
height:400,
renderTo:Ext.getBody(),
html:'<div id=d1><span id=sp>我是sp内容</span><div id=d2>我是d2内容</div></div>'
});
//查询系最常用的方法：
//Ext.dom.Element get fly getDom
var d1 = Ext.get('d1');
var sp = Ext.get('sp');
//查询系方法：
//1、contains:判断元素是否包含另一个元素
/**
alert(d1.contains(sp)); //alert true
alert(d1.contains('sp'));
*/
//2、child：从元素的直接子元素中选择与选择符匹配的元素,返回的只是一个元素，不返回数组
//两个参数，第二个参数如果为true表示取得的是原生的HTMLElement元素
/**
var ch = d1.child('span',true); //child('span')返回Ext.dom.Element ，child('span',true)返回HTMLDom
// alert(ch.dom.innerHTML);//会出错，应该直接alert（ch.innerHTML）
alert(ch.innerHTML)
*/
//3、down：选择与选择符匹配的元素的子元素
/**
var ch1 = d1.down('#d2');
alert(ch1.dom.innerHTML);
*/
//4、first：选择元素的第一个子元素
/**
var f1 = d1.first();
alert(f1.dom.innerHTML); //alert 我是sp内容
var f2 = d1.first('div');
alert(f2.dom.innerHTML);//alert 我是d2内容
*/
//5、findParent：查找与简单选择符匹配的元素的父元素,返回原生的HTMLElement元素
/**
var parent = sp.findParent('div'); //
alert(parent.innerHTML);
*/
//6、findParentNode .up:查找与简单选择符匹配的元素的父元素
//7、is：判断元素是否匹配选择符
/**
alert(d1.is('div'));
*/
//8、last：选择元素的最后一个子元素
//9、next：选择元素同层的下一个元素
//10、prew:选择元素同层的上一个元素
/**
var next = sp.next();
alert(next.dom.nodeName);
*/
//11、parent：返回元素的父元素
//12、Ext.query：根据选择符获取元素 (还有一个Ext.dom.Element.query)
/**
var arr = Ext.query('span'); //HTMLElment[] 从document根开始查找
Ext.Array.each(arr,function(item){
alert(item.innerHTML);
});
*/
/**
var arr1 = Ext.query('span','d1'); //HTMLElment[] 从d1开始查找
Ext.Array.each(arr1,function(item){
alert(item.innerHTML);
});
*/
//13、Ext.select/Ext.dom.Element.select:根据选择符获取元素集合
//返回的都是元素集合：Ext.dom.CompositeElement（集合中元素是Ext.dom.Element）/Ext.dom.CompositeElementLite（集合中元素是HTMLElement）
//参数说明：3个参数
//1：selector 选择器（不要使用id选择器） ；
//2：返回的集合对象(boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement)
//3:指定的根节点开始查找
var list = Ext.select('span',false,'d1'); //Ext.dom.CompositeElementLite
Ext.Array.each(list.elements,function(el){
alert(el.innerHTML);
});
var list2 = Ext.select('span',true,'d1'); //Ext.dom.CompositeElement
Ext.Array.each(list2.elements,function(el){
alert(el.dom.innerHTML);
});
});Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'我的面板',
width:'100%',
height:400,
renderTo:Ext.getBody(),
html:'<div id=d1><span id=sp>我是sp内容</span><div id=d2>我是d2内容</div></div>'
});
//DOM操作系方法
var d1 = Ext.get('d1');
var sp = Ext.get('sp');
//1、appendTo：将当前元素追加到指定元素中(这两个元素都必须存在在document里)
// sp.appendTo(Ext.get('d2'));
//2、appendChild：在当前元素中追加元素
// sp.appendChild('d2');
//3、createChild：在当前元素中插入由DomHelper对象创建的元素
/**
sp.createChild({
tag:'ol',
children:[
{tag:'li',html:'tem1'},
{tag:'li',html:'ite2'}
]
});
*/
//4、insertAfter：将元素插入到指定元素之后
//5、insertBefore：将元素插入到指定元素之前
//6、insertSibling：在当前元素前或后插入（或创建）元素（同层）
//7、insertHtml：在当前元素内插入HTML代码
//8、remove：移除当前元素
// sp.remove();
//9、replace：使用当前元素替换指定元素
//10、replaceWith：使用创建的元素替换当前的元素
//11、wrap：创建一个元素，并将当前元素包裹起来。
// sp.wrap('<h1></h1>');
//操作样式系的方法
//1、addCls：增加CSS样式到元素，重复的样式会自动过滤
// sp.addCls('red');
//2、applyStyles：设置元素的style属性
// sp.applyStyles('backgroundColor:blue');
// sp.applyStyles({backgroundColor:'yellow'});
//3、setStyle：为元素设置样式
// sp.setStyle('backgroundColor','green');
// sp.setStyle('fontSize','40px');
//4、getStyle：放回元素的当前样式和计算样式
// alert(sp.getStyle('fontSize'));
// alert(Ext.encode(sp.getStyle(['fontSize','backgroundColor'])));
//5、getStyleSize：返回元素的样式尺寸
// alert(Ext.encode(sp.getStyleSize()));
//6、setOpacity：设置不透明
// var d2 = Ext.get('d2');
// d2.setStyle('backgroundColor','red');
// d2.setStyle('width','200px');
// d2.setStyle('height','200px');
// d2.setOpacity(.3); //0~1
//7、clearOpacity：清理不透明度设置
//8、getColor：返回CSS颜色属性的值，返回值为6位数组的16进制颜色值
//9、boxWrap：使用box.Markup定义的HTML代码包装元素
//10、addClsOnClick 添加样式当点击该元素的时候
// var d2 = Ext.get('d2');
// d2.addClsOnClick('red');
//11、addClsOnOver 添加样式当鼠标移动到元素上的时候
// var d2 = Ext.get('d2');
// d2.addClsOnOver('red');
//12、getMargin ：返回值具有top、left、right、bootom属性的对象，属性值为响应的元素margin值
// var d2 = Ext.get('d2');
// alert(d2.getMargin('r'));
// alert(Ext.encode(d2.getMargin()));
//13、removeCls：删除元素的样式
// var d2 = Ext.get('d2');
// d2.addCls('red'); //参数String/String[] className
// d2.removeCls('red'); //参数String/String[] className
//14、replaceCls：替换元素的样式
//15、set：设置元素属性
//16、radioCls：为当前元素添加样式，并删除其兄弟节点的元素
//17、unituzeBox：将表示margin大小的对象转换为字符串
//对齐系操作方法：
//alignTo:将当前元素对齐到另外一个元素。定位位置的选择是基于所对齐的元素的位置
//（9个定位点tl、t、tr、l、c、r、bl、b、br）。
//anchorTo：当窗口调整大小时，将当前元素锚到指定元素并重新调整
//removeAnchor：移除当前元素的任何锚定位
//尺寸大小操作系方法
//setHeight：设置元素宽度
//setWidth：设置元素高度
//setSize：设置元素大小
//clip：存储元素当前的overflow设置并裁剪溢出。
//unclip：在clip被调用前将裁剪值（溢出）还原为原始值
//getDocumentWidth：返回文档宽度
//getDocumentHeight：返回文档高度
//getFrameWidth：返回合计了padding和border的宽度
//getHeight：返回offsetHeight值
//getWidth：返回offsetWidth值
//getPadding：返回padding的宽度
//getSize：返回元素的大小
//getTextWidth：返回文本宽度
//getViewportHeight：返回窗口的可视高度
//getViewportWidth：返回窗口的可视宽度
//getViewSize：返回元素可以用来放置内容的区域大小
//getBorderWidth：返回边界宽度
//getComputeWidth：返回计算出来的CSS宽度
//getComputeHeight：返回就算出来的CSS高度
//isBorderBox:主要用于检测盒子模型，与IE6、7有关
var d2 = Ext.get('d2');
alert(Ext.encode(d2.getSize()));
//定位系方法
//clearPositioning：当文档加载完成后，清理定位回到默认值
//fromPoint：
//getBottom：返回右下角的Y坐标
//getBox：返回一个包含元素位置的对象，对象包括元素左上角的坐标值、右下角的坐标值、宽度和高度
//getCenterXY：返回元素的当前坐标
//getLeft：返回一个包含元素位置的对象
//getPositionging：返回一个包含CSS位置属性的对象
//getRegin：返回元素所在区域
//getRight：返回元素的右边X坐标
//getTop：返回元素顶部Y坐标
//getViewRegion：返回元素的内容区域
//getX：返回元素当前的X坐标
//getY：返回元素当前的Y坐标
//getXY：返回元素当前的XYzuobiao
//move：移动元素
//moveTo：将元素移动到指定的XY坐标上
//position：初始化元素的位置
//setBottom：设置元素的bottom样式
//setBounds：设置元素的位置和大小
//setBox：设置元素的位置大小
//setLeft：设置元素坐标的X坐标
//setRight：设置元素right的样式值
//setLeftTop：设置元素左上角坐标
//setLocation：设置元素位置
//setTop：设置元素的顶部Y坐标
//setX、setY、setXY：设置元素的X、Y、XY坐标位置
//translatePoints：转换元素的页面坐标为CSS的left和top值
//滚动系方法
//getScroll：返回元素当前滚动条的位置
//isScrollable：如果元素允许滚动，则返回true
//scroll：滚动到指定位置
//scrollIntoView：将元素滚动到指定容器的可视区域
//scrollTo：将元素滚动到指定的位置
});事件：
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'我的面板',
width:'100%',
height:400,
renderTo:Ext.getBody(),
html:'<div id=d1><span id=sp>我是sp内容</span><div id=d2>我是d2内容</div></div><input id=inp value=123 /><form id=f1><input name=uname value=ddd /><input name=pwd value=123 /></form>'
});
//DOM操作系方法
var d1 = Ext.get('d1');
var sp = Ext.get('sp');
//常用事件方法：为元素添加事件
//1、addKeyMap：为元素创建一个KeyMap对象
/**
var inp = Ext.get('inp');
inp.addKeyMap({ //Ext.util.KeyMap ==========>对象class
key:Ext.EventObject.A, //Ext.EventObject
ctrl:true,
fn:function(){
alert('按ctrl + A，执行');
},
scope:this
});
*/
//2、addKeyListener：为KeyMap绑定事件addKeyListener( key, fn, [scope] ) : Ext.util.KeyMap
//参数说明： String/Number/Number[]/Object
/**
var inp = Ext.get('inp');
inp.addKeyListener({
key:Ext.EventObject.X,
ctrl:false
},
function(){
alert('x执行了')
},
this
);
*/
//常用事件
//on：绑定事件
/**
var inp = Ext.get('inp');
inp.on('click',function(){
alert('zhxingle');
});
inp.un('click');
//un：移除事件
*/
//click：单击事件
//blur：失去焦点事件
//focus：获得焦点事件
/**
var inp = Ext.get('inp');
inp.focus();
*/
//其他重要且重要方法
//center：使元素居中
var inp = Ext.get('inp');
// inp.center();
//clean:清理空白的文本节点
//createShim：为元素创建一个iframe垫片保证选择或其他对象跨域时可见
//getLoader：返回ElementLoader对象
/**
var loader = inp.getLoader(); //ElementLoader
loader.load({
url:'base/03_js.jsp', //用到的jsp在下面定义
renderer:function(loader,response){
//把对象转换为字符串表示形式：Ext.encode
//把一个字符串转换为javascript对象：Ext.decode
var obj = Ext.decode(response.responseText);
Ext.getDom('inp').value = obj.name;
}
});
*/
//highlight：高亮显示特效
// sp.highlight();
//show、hide：显示隐藏元素
// var d2 = Ext.get('d2');
// d2.setStyle('width','100px');
// d2.setStyle('height','100px');
// d2.setStyle('backgroundColor','red');
// d2.show({duration:2000});
// d2.hide({duration:2000});
//ghost：元素移动特效
// d2.ghost('r',{duration:2000}); r,b,l,t
//fadeIn、fadeOut：淡入淡出
//slideIn、slideOut：向上向下滑动
// d2.slideIn('r',{duration:2000});
//getValue：如果元素有value属性，返回其值
// alert(inp.getValue());
//normalize：将CSS属性中的连接符号去掉，例如将“font-size”转为fontSize这样
//load：直接调用ElementLoader的load方法为元素加载内容
//mask：遮罩当前元素，屏蔽用户操作
//unmask：移除遮罩
// Ext.getBody().mask('请稍等...');
// window.setTimeout(function(){
// Ext.getBody().unmask();
// },2000);
// Ext.defer(function(){
// Ext.getBody().unmask();
// },2000);
//repaint：强迫浏览器重新绘画元素
//serializeForm：序列化为URL编码的字符串
// alert(Ext.dom.Element.serializeForm('f1'));
//update:更新元素的innerHTML属性
//unselectable:禁用文本选择
inp.unselectable();
});<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
{
name:'hahaha',
age:10
}DomHelper辅助类
如果想生成dom节点，不建议使用原生的方法去生成dom节点，原因是代码量比较大的时候性能比较低，其二是自己组装HTML字符串比较麻烦。在Ext里，DomHelper对象类似一个元素生成器，用于解决此类问题。一般的javascript框架底层都会有生成html代码的类似功能函数。
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'DomHelper-元素生成器的使用',
width:'90%',
height:400,
renderTo:Ext.getBody(),
html:'<div id=d1>我是d1</div>'
});
//DomHelper常用方法
//1：createHtml或markup
//配置项：tag：元素的名称 children/cn：表示子元素 cls：表示样式 html：文本内容
/**
var html = Ext.DomHelper.createHtml({
tag:'ol',
cn:[{tag:'li',html:'it1'},
{tag:'li',html:'it2'}
]
});
console.info(html); //<ol><li>it1</li><li>it2</li></ol>
//----------------------------------------------
var html = Ext.DomHelper.createHtml({
tag:'div',
cn:[
{tag:'a',html:'zdzddzd',href:'www.sina.com'},
{tag:'input',value:'点击',type:'button'}]
});
console.info(html); //<div><a href="www.sina.com">zdzddzd</a><input value="点击" type="button"/></div>
*/
//2：createDom方法（这个方法生成原生的dom节点，不推荐）
/**
var dom = Ext.DomHelper.createDom({
tag:'div',
html:'我是div'
});
console.info(dom);
*/
//3：append方法
/**
Ext.DomHelper.append('d1',{
tag:'ul',
cn:[
{tag:'li',html:'1111'},
{tag:'li',html:'2222'}]
});
//--------------------------------------------------
Ext.DomHelper.append('d1','<span>span!!!!!</span>')
*/
//4：insertHtml方法，这个方法就是为了操作原生的node节点的
//参数说明：insertHtml( where, el, html ) String where HTMLElement/TextNode el String html
// Ext.DomHelper.insertHtml('beforeEnd',Ext.getDom('d1'),'<h1>我是标题</h1>');
//beforeEnd,beforeBegin,afterEnd,afterBegin
//5:overwrite方法
// Ext.DomHelper.overwrite('d1',{tag:'span',html:'我是覆盖span'});
//6：createTemplate方法
/**
var tp = Ext.DomHelper.createTemplate('<h1>{text}</h1><h2>{text2}</h2>'); //return Ext.Template
tp.overwrite('d1',{text:'我是被替换的内容',text2:'----我也是替换的内容！！'});
*/
//7：applyStyles方法
Ext.DomHelper.applyStyles('d1',{
width:'100px',
height:'100px',
backgroundColor:'green'
});
});这个类一共提供了8个方法，最常用的方法，就是Ext.query（Ext.dom.Query.select方法），这个方法的详细使用规则：
- 基本元素选择器
- id选择器
-css的类选择器
- 属性选择器
- 伪类选择器（也可以说是相当于JQ过滤选择器）
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.DomQuery实例',
width:'500',
height:400,
renderTo:Ext.getBody(),
html:'<ul><li>item1</li><li>item2</li></ul><div id=d1><span id=sp>我是sp</span><span class=mycolor>我是第二个span</span></div>'
});
//Ext.dom.Query(Ext.DomQuery)Ext.dom.Queryselect ====Ext.query 返回HTMLElement[]原生元素集合
// 基本元素选择器 id选择器 css的类选择器 标签选择器（简单选择器）
// 属性选择器
// 伪类选择器（也可以说是相当于JQ过滤选择器）
//Ext.query('span') 返回整个文档的span标签
/**
// var arr = Ext.query('span'); //没有指定root，从document根开始
var arr = Ext.query('span','d1');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
*/
//Ext.query('#id'); 根据id进行查询，但返回数组
/**
var arr = Ext.query('#d1');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
*/
//Ext.query('.class'); 根据样式进行查询，返回数组
/**
var arr = Ext.query('.mycolor');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
*/
//复杂选择器
//Ext.query('div span');根据标签进行包含选择器过滤
/**
var arr = Ext.query('div span');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
//------------------------
var arr1 = Ext.query('div[id=d1] span');
Ext.Array.each(arr1,function(el){
alert(el.innerHTML);
});
*/
//Ext.query('*'); 匹配所有元素
// alert(Ext.query('*'));
//Ext.query('E[attr=val]'); 进行一个属性的选择器
/**
var arr1 = Ext.query('div[id]');
Ext.Array.each(arr1,function(el){
alert(el.id);
});
*/
//Ext.query('E>F'); 进行一个层次查找，父节点为E的F节点
/**
var arr1 = Ext.query('div>span');
var arr2 = Ext.query('div/span'); //Xpath:div/span查找xml文件
Ext.Array.each(arr1,function(el){
alert(el.innerHTML);
});
*/
// 伪类选择器（也可以说是相当于JQ过滤选择器）
//E:first-child
var arr1 = Ext.query('li:first-child');
Ext.Array.each(arr1,function(el){
alert(el.innerHTML);
});
});Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'Ext.DomQuery实例',
width:'500',
height:400,
renderTo:Ext.getBody(),
html:'<ul><li>item1</li><li>item2</li></ul><div id=d1><span id=sp>我是sp</span><span class=mycolor>我是第二个span</span></div>'
});
//Ext.dom.Query(Ext.DomQuery)Ext.dom.Queryselect ====Ext.query 返回HTMLElement[]原生元素集合
// 基本元素选择器 id选择器 css的类选择器 标签选择器（简单选择器）
// 属性选择器
// 伪类选择器（也可以说是相当于JQ过滤选择器）
//Ext.query('span') 返回整个文档的span标签
/**
// var arr = Ext.query('span'); //没有指定root，从document根开始
var arr = Ext.query('span','d1');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
*/
//Ext.query('#id'); 根据id进行查询，但返回数组
/**
var arr = Ext.query('#d1');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
*/
//Ext.query('.class'); 根据样式进行查询，返回数组
/**
var arr = Ext.query('.mycolor');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
*/
//复杂选择器
//Ext.query('div span');根据标签进行包含选择器过滤
/**
var arr = Ext.query('div span');
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
//------------------------
var arr1 = Ext.query('div[id=d1] span');
Ext.Array.each(arr1,function(el){
alert(el.innerHTML);
});
*/
//Ext.query('*'); 匹配所有元素
// alert(Ext.query('*'));
//Ext.query('E[attr=val]'); 进行一个属性的选择器
/**
var arr1 = Ext.query('div[id]');
Ext.Array.each(arr1,function(el){
alert(el.id);
});
*/
//Ext.query('E>F'); 进行一个层次查找，父节点为E的F节点
/**
var arr1 = Ext.query('div>span');
var arr2 = Ext.query('div/span'); //Xpath:div/span查找xml文件
Ext.Array.each(arr1,function(el){
alert(el.innerHTML);
});
*/
// 伪类选择器（也可以说是相当于JQ过滤选择器）
//E:first-child
/**
var arr1 = Ext.query('li:first-child');
Ext.Array.each(arr1,function(el){
alert(el.innerHTML);
});
*/
//Ext.DomQuery其他方法
//jsSelect：根据选择符选择元素
//2、compile:将选择符或Xpath编译成一个可重复使用的函数
/**
var fn = Ext.DomQuery.compile('span');
alert(fn);
var arr = fn(Ext.getDom('d1'));
Ext.Array.each(arr,function(el){
alert(el.innerHTML);
});
*/
//filter:使用简单选择符过滤元素数组
//参数：filter( el, selector, nonMatches ) : HTMLElement[]
//el : HTMLElement[] selector : String nonMatches : Boolean
/**
var arr = document.getElementsByTagName('div');
var filterarr = Ext.DomQuery.filter(arr,'div[id=d1]',false);
//false,选择出div的id=d1的，如果是true，选择出div的id！=d1的
Ext.Array.each(filterarr,function(el){
alert(el.id);
});
*/
//is：判断元素是否匹配简单选择符
alert(Ext.DomQuery.is(Ext.getDom('d1'),'div[id]')); //alert false
});
类似资料：