具体实例：
Ext.onReady(function(){
//Ext.DomQuery
Ext.create('Ext.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.DomQuery.select == Ext.query //返回内容:HTMLElement[]
///Ext.DomQuery.jsSelect：根据选择符选择元素 （这个方法和Ext.DomQuery.select差不多）
//我把他分为三大类：
//基本选择器 id选择器 css的类选择器 标签选择器（简单选择器）
//属性选择器、伪类选择器（也可以说是相当于JQ过滤选择器）（复杂选择器）
//元素选择器
//Ext.query('span') 返回整个文档的span标签（数组形式）
//1 Ext.query('span' , 'root') 根据跟节点进行查询
// var arr = Ext.query('span' , 'd1');//使用指定父节点的方式进行查找
// Ext.Array.each(arr,function(el){//对查询的结果进行遍历
// alert(el.innerHTML);
// });
//id选择器
//2 Ext.query('#id') 根据id进行查询，但返回数组
// var arr = Ext.query('#d1');
// Ext.Array.each(arr,function(el){
// alert(el.innerHTML);
// });
//3 Ext.query('.class') 根据样式进行查询，返回数组
// var arr = Ext.query('.mycolor');
// Ext.Array.each(arr,function(el){
// alert(el.innerHTML); //结果：我是第二个span
// });
//jsp文件中的样式
// <style type="text/css">
// .mycolor{color:green;}
// </style>
//Ext.query('*') 匹配所有元素
//alert(Ext.query('*'));
//复杂选择器：
//1 :Ext.query('div span') 根据标签进行包含选择器过滤
// var arr = Ext.query('div[id=d1] span');//可以添加限制条件，否则会查找出所有的
// Ext.Array.each(arr,function(el){
// alert(el.innerHTML);//结果：我是sp内容 我是第二个span
// });
//1.1:Ext.query('E>F') 进行一个层次查找父节点为E的F节点
// var arr = Ext.query('div>span'); //Xpath:div/span 查找xml文件比较实用
// Ext.Array.each(arr,function(el){
// alert(el.innerHTML);
// });
//2 :属性选择器Ext.query('E[attr=val]') 进行一个属性的选择匹配
// var arr = Ext.query('div[id*=d]');//将所有id包含d的都查找出来// * 表示包含；^表示前半部分；$表示后半部分
// Ext.Array.each(arr,function(el){
// alert(el.id);
// });
/* 元素选择:
* 任意元素
E 带一个E标签的元素
E F E派生的元素中所有带F标签的
E > F or E/F E直接子元素中所有带F标签的
E + F 带有E标签的元素后跟着的带F标签的所有元素
E ~ F 带有E标签的兄弟元素后跟着的带F标签的所有元素
属性选择:
'@'和引用都是可选的. 例如, div[@foo='bar'] 就是个有效的属性选择.
E[foo] 拥有一个属性"foo"
E[foo=bar] 有一个属性"foo"等价于"bar"
E[foo^=bar] 有一个属性"foo"是由"bar"开头的
E[foo$=bar] 有一个属性"foo"是以"bar"结尾的
E[foo*=bar] 有一个属性"foo"包含子字符串"bar"
E[foo%=2] 有一个属性"foo"能被2整除
E[foo!=bar] 有一个属性"foo"不等价于"bar"
伪类:
E:first-child E是父类的第一个孩子
E:last-child E是父类的最后一个孩子
E:nth-child(_n_) E是父类的第n个孩子(以1为单位规格)
E:nth-child(odd) E是父类的一个奇数孩子
E:nth-child(even) E是父类的一个偶数孩子
E:only-child E是其父类的唯一孩子
E:checked E是一个带有检查真属性的元素(例如：一个radio或checkbox)
E:first 结果集中的第一个E
E:last 结果集中的最后一个E
E:nth(_n_) 结果集中的第n个E(1为基准)
E:odd 快捷方式:第n个孩子(奇数位)
E:even 快捷方式:第n个孩子(偶数位)
E:contains(foo) E的innerHTML中包含子字符串"foo"
E:nodeValue(foo) E中包含一个文本节点，且节点值等于“foo”
E:not(S) 一个与简单选择符S不匹配的E元素
E:has(S) 一个拥有可以与简单选择符S匹配的子集的E元素
E:next(S) 下一个兄弟元素是与简单选择符S匹配的E元素
E:prev(S) 前一个兄弟元素是与简单选择符S匹配的E元素
E:any(S1|S2|S2) 和任意的简单选择符S1, S2 或 S3匹配的E元素
CSS 值选择:
E{display=none} css的值"display"等价于"none"
E{display^=none} css的值"display" 是以"none"开头的
E{display$=none} css的值"display" 是以"none"结尾的
E{display*=none} css的值"display" 包含子字符串"none"
E{display%=2} css的值"display"是可以被2整除的
E{display!=none} css的值"display"不等价于"none"
*/
//3: 伪类选择器
//E:first-child
// var arr = Ext.query('li:first-child'); //过滤所有的li,并选择第一个
// Ext.Array.each(arr,function(el){
// alert(el.innerHTML);//结果：item1
// });
//Ext.DomQuery其他方法：
//1：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);
// });
//2: filter：使用简单选择符过滤元素数组
//参数说明 HTMLElement[] el, String selector, Boolean nonMatches
// var arr = document.getElementsByTagName('div');
// var filterarr = Ext.DomQuery.filter(arr,'div[id=d1]',false);//true过滤相反的，默认false
// Ext.Array.each(filterarr,function(el){
// alert(el.id);
// });
//is：判断元素是否匹配简单选择符
//alert(Ext.DomQuery.is(Ext.getDom('d1'),'div[id]'));//判断获取的Dom元素是否是一个包含id的Div
//结果：true
});ExtJS学习----------Ext.Dom.Query类学习（实例）
原文地址：http://blog.csdn.net/z1137730824/article/details/39204103
