【Ext笔记】Ext 4.x 选择器和DOM操作

最原始的html dom方法：通过id使用getElementById方法定位到某个元素。但是不可能给页面的每个元素都加Id，所以就需要用到选择器对页面元素进行定位和选择。

Ext的选择器主要有以下几种，要注意区分它们返回的类型：HTMLElement对象  Element对象  CompositeElementLite对象  CompositeElement对象 数组或Document对象 

1、Ext.query()               返回的是：一个由  HTMLElement对象   组成的数组

2、Ext.get() 和 Ext.fly()  返回的是：Element对象         Ext.get('MyId').dom.innerHTML= '内容';

　　　　　　　　　　　　　get方法会在缓存中记录对象，fly方法不记录，所以get适用于多次调用的场合，fly适用于一次性调用的场合，以减少内存消耗。

3、Ext.getDom()            返回的是： HTMLElement对象   Ext.getDom('MyId').innerHTML= '内容';

4、Ext.select()               返回的是：HTMLElement对象或者Element对象

　　　　　　　　　　　　  Ext.select(selector,unique,root)中unique默认为false,表示不创建，返回  CompositeElementLite对象（是HTMLElement对象 ） ;

 　　　　　　　　　　　　 若设置为true, 表示创建，返回   CompositeElement对象（是Element对象）。CompositeElement对象继承自CompositeElementLite对象。

 　　　　　　　　　　　  为节省内存，提高性能，应多使用 HTMLElement对象 。

5、Ext.getCmp() 　　　　平时常用，《ExtJS 权威指南》没写

-------------------------------------------

Ext.dom.Element提供了171个方法，非常丰富，所以我们经常query取到DOM Node然后交给get去变成Element

-------------------------------------------

Ext.query(QueryStr)中QueryStr的格式：看网上很多分类都有点乱，《ExtJS 权威指南》中分类比较规范，常用的总结如下：

1、基本选择符 " "

（1) Ext.query("*") //选择任何无素

（2）Ext.query("E") //根据标记E选择元素

　　　Ext.query("span") 

（3）Ext.query("E F") 

（4）Ext.query("E>F")

（5）Ext.query("E+F")

（6）Ext.query("E~F")

（7）Ext.query("#ID") //选择id属性值为ID的元素

（8）Ext.query(".classname"）//选择CSS类名为classname的元素

 　　Ext.query(".check")  Ext.query("td.check")

2、属性选择符 "[ ]"

（1）Ext.query("[attribute]")  //选择带有属性attribute的元素

       Ext.query("E[attribute]") //E为元素标记

       Ext.query("input[id]")

 (2)  Ext.query("[attribute=value]")  //选择attribute的属性值为value的元素

 　　Ext.query("E[attribute=value]")   

　　 Ext.query("input[name=articleId]")

(3)  Ext.query("[attribute^=value]")  //选择attribute的属性值以value开头的元素

　　Ext.query("E[attribute^=value]")  

(4)  Ext.query("[attribute$=value]")  //选择attribute的属性值以value结尾的元素

　　Ext.query("E[attribute$=value]")  

(5)  Ext.query("[attribute*=value]")  //选择attribute的属性值包含value的元素

 　　Ext.query("E[attribute*=value]")   //E为元素标记

(6)  Ext.query("[attribute%=value]")  //选择attribute的属性值能整除value的元素

 　　Ext.query("E[attribute%=value]")   //E为元素标记

(7)  Ext.query("[attribute!=value]")  //选择attribute的属性值不等于value的元素

 　　Ext.query("E[attribute!=value]")   //E为元素标记

3、CSS属性选择符

同"2、属性选择符"的语法，不同的地方在使用大括号{}代替属性选择符中的中括号[]。

同时要注意：注意padding、background等可以合并定义的CSS属性，查询时必须拆分成单一的属性，如padding-left，否则查询结果为空。

Ext.query("td{text-align=center}")

Ext.query("td{padding-left$=30px}")

4、伪类选择符 E:X

（1）E:first-child

（2） E:last-child

（3）E:nth-child(n)

（4）E:nth-child(odd) 或 E:odd //选择标记为E，且其为父结点的奇数子节点的元素

（5）E:nth-child(even) 或 E:even

（6）E:only-child

（7）E:checked

（8）E:first  //标记为E的元素集合中的第一个元素

（9）E:last

（10）E:nth(n)

（11）...后面的不常用