什么是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();
});
03_js.jsp
<%@ 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'
});
});
Ext.dom.Query
这个类一共提供了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.DomQuery的其他方法
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
});