在 Ext.Element 的方法中用到了不少选择器,如
Ext.Element
findParentNode :simple selector
first :simple selector
select : selector
Ext.EventObject.getTarget :simple selector
Ext.DomQuery.is :simple selector
但是这些方法中的参数有的有特殊要求 simple selector ,而不是我们所熟悉的通用 css选择器,但API对此解释较少。
simple selector :
主要用于过滤节点集,以及对某一特定节点是否满足属性约束等。所以该选择器不包含后代选择器以及子选择器,同胞选择器 等会产生新结果节点集的特性。使DomQuery可以更高效。
如:
div.class1
span:first-child
selector :
主要用于生成结果节点集合,会有扩充的功能,而扩充功能则主要通过后代选择器以及子选择器,同胞选择器来实现。
如:
ul > li div a:first-child
解释:
findParentNode : 对祖先(父)节点集合进行过滤,first 对子节点进行过滤,getTarget 对 target的祖先(父)节点集合进行过滤,以上三种采用simple selector
而 Ext.Element.select 要选择出一些符合需求的子孙节点,主要为扩充操作,采用selector。
示例:
<div id="d" class="divd">
<a href="#" class="l">x</a>
<a href="#">y</a>
<a href="#" class="l">x</a>
</div>
<script>
var div=Ext.get("d");
var x= Ext.DomQuery.compile("#d a.l", "select");
console.log(x());
console.log("************************************************");
x= Ext.DomQuery.compile("a.l", "select");
console.log(x(div.dom));
console.log("************************************************");
x= Ext.DomQuery.compile("#d a.l", "simple");
console.log(x());
console.log(x(document.getElementsByTagName("a")));
console.log("************************************************");
x= Ext.DomQuery.compile("a.l", "simple");
console.log(x());
console.log(x(document.getElementsByTagName("a")));
</script>