ExtJs源码分析与学习—ExtJs元素Element（五）

元素的查询Ext.DomQuery

 

    该类结合css选择器可以提供高效的查询。首先说一下DOM中对文档元素的查询，主要有以下方法

•     document.getElementById(id)
•     element.getElementsByTagName(tagName)

    DOM对应的6个属性来获取其父、子及兄弟节点的引用

•     parentNode 指向其父节点的引用
•     previousSibling 指向前一个兄弟节点的引用
•     nextSibling 指向后一个兄弟节点的引用
•     firstChild 指向其第一个节点的引用
•     lastChild 指向其最后一个节点的引用
•     childNodes 返回所有子节点的引用的集合

     下面看该类中几个主要方法。先看combination过滤器的实现，共有四种模式，分别为EF,E/F(E>F),E+F,E~F，格模式详见程序中的注释和实现。

 

        /**
	 * 实现combination选择器的查询方式
	 * @param {} ns 要查询的元素或元素集合
	 * @param {} mode 查询模式
	 * @param {} tagName 标签名
	 */
function getNodes(ns, mode, tagName){
        var result = [], ri = -1, cs;
        if(!ns){
            return result;
        }
        tagName = tagName || "*";//没有指定tagName，默认为所有的元素，注意这里用*来查询所有
        //ns参数值为element时，先封装成数组，后续统一处理
        if(typeof ns.getElementsByTagName != "undefined"){
            ns = [ns];
        }
        if(!mode){//后代选择器，符号值为 " " E F模式，查询E标签下所有标签名为F的后代元素
            for(var i = 0, ni; ni = ns[i]; i++){//找到结果集中所有满足的元素
                cs = ni.getElementsByTagName(tagName);
                for(var j = 0, ci; ci = cs[j]; j++){//找到所有满足tagName的后代元素
                    result[++ri] = ci;
                }
            }
        } else if(mode == "/" || mode == ">"){// E/F 或E>F 模式，查询E标签下所有标签名为F的子元素，只有一层，而EF模式为所有后代元素，会有好几层的查询
            var utag = tagName.toUpperCase();
            for(var i = 0, ni, cn; ni = ns[i]; i++){
                cn = ni.childNodes;
                for(var j = 0, cj; cj = cn[j]; j++){
                    if(cj.nodeName == utag || cj.nodeName == tagName  || tagName == '*'){
                        result[++ri] = cj;
                    }
                }
            }
        }else if(mode == "+"){// E+F模式，在E标签下的所有元素集合中，查找每个元素的相邻的后续兄弟元素（只找第一个后续兄弟）中标签为F的元素
            var utag = tagName.toUpperCase();
            for(var i = 0, n; n = ns[i]; i++){
                while((n = n.nextSibling) && n.nodeType != 1);
                if(n && (n.nodeName == utag || n.nodeName == tagName || tagName == '*')){
                    result[++ri] = n;
                }
            }
        }else if(mode == "~"){// E~F模式，在E标签下的所有元素集合中，查找每个元素的相邻的后续兄弟元素中标签为F的元素
            var utag = tagName.toUpperCase();
            for(var i = 0, n; n = ns[i]; i++){
                while((n = n.nextSibling)){
                    if (n.nodeName == utag || n.nodeName == tagName || tagName == '*'){
                        result[++ri] = n;
                    }
                }
            }
        }
        return result;
    }

 

      接下来看过滤器的实现。Ext.DomQuery中提供了5中过滤方式：id、class、tagName、attribute、pseudo（伪操作根据函数），为此也相应的提供了byId、byClassName、byTag、byAttribute、byPseudo 5个函数来实现，下面主要看byAttribute

 

        /**
	 * 
	 * @param {} cs 要查询的元素结合
	 * @param {} attr 属性名
	 * @param {} value 属性对应的值
	 * @param {} op 操作符
	 * @param {} custom 对于元素属性，采用[]，对于css样式则采用{}
	 */
    function byAttribute(cs, attr, value, op, custom){
        var result = [], 
            ri = -1, 
            useGetStyle = custom == "{",	    
            fn = Ext.DomQuery.operators[op],//DOM操作符    
            a,//根据判断的属性来取得元素对应的属性值或css样式属性值
            xml,
            hasXml;
            
        for(var i = 0, ci; ci = cs[i]; i++){
	    // skip non-element nodes.
            if(ci.nodeType != 1){//忽略不是元素节点
                continue;
            }
            // only need to do this for the first node
            if(!hasXml){
                xml = Ext.DomQuery.isXml(ci);
                hasXml = true;
            }
	    
            // we only need to change the property names if we're dealing with html nodes, not XML
            // html节点的处理
            if(!xml){
                if(useGetStyle){
                    a = Ext.DomQuery.getStyle(ci, attr);
                } else if (attr == "class" || attr == "className"){
                    a = ci.className;
                } else if (attr == "for"){
                    a = ci.htmlFor;
                } else if (attr == "href"){
		    // getAttribute href bug
		    // http://www.glennjones.net/Post/809/getAttributehrefbug.htm
                    a = ci.getAttribute("href", 2);
                } else{
                    a = ci.getAttribute(attr);
                }
            }else{
                a = ci.getAttribute(attr);
            }
            if((fn && fn(a, value)) || (!fn && a)){
                result[++ri] = ci;
            }
        }
        return result;
    }

 

    下面看select方法：选择一组元素

 

             select : document.querySelectorAll ? function(path, root, type) {
			root = root || document;
			if (!Ext.DomQuery.isXml(root)) {
				try {
					var cs = root.querySelectorAll(path);
					return Ext.toArray(cs);
				} catch (ex) {
				}
			}
			return Ext.DomQuery.jsSelect.call(this, path, root, type);
		} : function(path, root, type) {
			return Ext.DomQuery.jsSelect.call(this, path, root, type);
		},

 

      该函数分为两种情况，如果支持document.querySelectorAll，优先调用该方法返回。调用传入的参数path为选择器，root为开始查询的节点，默认为document。该方法的别名为"Ext.query = Ext.DomQuery.select;"。另外该类也是单例模式，代码实现比较复杂，内部用到了缓存机制，代码中有三个缓存变量

 

  var cache = {}, 
      	simpleCache = {}, 
    	valueCache = {},

• cache缓存了选择器的编译（compile）结果
• simpleCache缓存了选择器的简单（simple）编译结果
• valueCache 缓存了选择器查询元素的值