第七章：选择器引擎

/* document.getElementsBySelector(selector)
    version 0.4 simon willson march 25th 2003
    -- work in phonix0.5 mozilla1.3 opera7 ie6 
    */
    function getAllchildren(e){
        //取得一个元素的子孙，并兼容ie5
        return e.all ? e.all : e.getElementsByTgaName(‘*‘);
    }

    document.getElementsBySelector = function(selector){
        //如果不支持getElementsByTagName 则直接返回空数组
        if (!document.getElementsByTgaName) {
            return new Array();
        }

        //切割CSS选择符，分解一个个单元格（每个单元可能代表一个或多个选择器，比如p.aaa则由标签选择器和类选择器组成）
        var tokens = selector.split(‘ ‘);
        var currentContext = new Array(document);
        //从左至右检测每个单元，换言此引擎是自顶向下选择元素
        //如果集合中间为空，立即中至此循环
        for (var i = 0 ; i < tokens.length; i++) {
            //去掉两边的空白（并不是所有的空白都没有用，两个选择器组之间的空白代表着后代迭代器，这要看作者们的各显神通）
            token = tokens[i].replace(/^\s+/,‘‘).replace(/\s+$/,‘‘);
            //如果包含ID选择器，这里略显粗糙，因为它可能在引号里边。此选择器支持到属性选择器，则代表着可能是属性值的一部分。
            if (token.indexOf(‘#‘) > -1) {
                //假设这个选择器是以tag#id或#id的形式，可能导致bug（但这些暂且不谈，沿着作者的思路看下去）
                var bits =token.split(‘#‘);
                var tagName = bits[0];
                var id = bits[1];
                //先用id值取得元素，然后判定元素的tagName是否等于上面的tagName
                //此处有一个不严谨的地方，element可能为null,会引发异常
                var element = document.getElementById(id);
                if(tagName && element.nodeName.toLowerCase() != tagName) {
                    //没有直接返回空结合集
                    return new Array();
                }

                //置换currentContext,跳至下一个选择器组
                currentContext = new Array(element);
                continue;
            }
            //如果包含类选择器，这里也假设它以.class或tag.class的形式
            if (token.indexOf(‘.‘) > -1){
                var bits = token.split(‘.‘);
                var tagName = bits[0];
                var className = bits[1];
                if (!tagName){
                    tagName = ‘*‘;
                }
                //从多个父节点，取得它们的所有子孙
                //这里的父节点即包含在currentContext的元素节点或文档对象
                var found = new Array;//这里是过滤集合，通过检测它们的className决定去留
                var foundCount = 0;
                for (var h = 0; h < currentContext.length; h++){
                    var elements;
                    if(tagName == ‘*‘){
                        elements = getAllchildren(currentContext[h]);
                    } else {
                        elements = currentContext[h].getElementsByTgaName(tagName);
                    }
                    for (var j = 0; j < elements.length; j++) {
                        found[foundCount++] = elements[j];
                    }
                }

                currentContext = new Array;
                for (var k = 0; k < found.length; k++) {
                    //found[k].className可能为空，因此不失为一种优化手段，但new regExp放在//外围更适合
                    if (found[k].className && found[k].className.match(new RegExp(‘\\b‘+className+‘\\b‘))){
                        currentContext[currentContextIndex++] = found[k];
                    }
                }
                continue;
            }
            //如果是以tag[attr(~|^$*)=val]或[attr(~|^$*)=val]的组合形式
            if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)){
                var tagName = RegExp.$1;
                var attrName = RegExp.$2;
                var attrOperator = RegExp.$3;
                var attrValue = RegExp.$4;
                if (!tagName){
                    tagName = ‘*‘;
                }
                //这里的逻辑以上面的class部分相似，其实应该抽取成一个独立的函数
                var found = new Array;
                var foundCount = 0;
                for (var h = 0; h < currentContext.length; h++){
                    var elements;
                    if (tagName == ‘*‘) {
                        elements = getAllchildren(currentContext[h]);
                    } else {
                        elements = currentContext[h].getElementsByTagName(tagName);
                    }
                    for (var j = 0; j < elements.length; j++) {
                        found[foundCount++] = elements[j];
                    }
                }

                currentContext = new Array;
                var currentContextIndex = 0;
                var checkFunction;
                //根据第二个操作符生成检测函数，后面的章节有详细介绍 ，请继续关注哈
                switch (attrOperator) {
                    case ‘=‘ : //
                    checkFunction = function(e){ return (e.getAttribute(attrName) == attrValue);};
                    break;
                    case ‘~‘ :
                    checkFunction = function(e){return (e.getAttribute(attrName).match(new RegExp(‘\\b‘ +attrValue+ ‘\\b‘)));};
                    break;
                    case ‘|‘ :
                    checkFunction = function(e){ return (e.getAttribute(attrName).match(new RegExp(‘^‘+attrValue+‘-?‘)));};
                    break;
                    case ‘^‘ : 
                    checkFunction = function(e) {return (e.getAttribute(attrName).indexOf(attrValue) == 0);};
                    break;
                    case ‘$‘:
                    checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length);};
                    break;
                    case ‘*‘:
                    checkFunction  = function(e) {return (e.getAttribute(attrName).indexOf(attrValue) > -1 );}
                    break;
                    default :
                    checkFunction = function(e) {return e.getAttribute(attrName);}; 
                }
                currentContext = new Array;
                var currentContextIndex = 0 ;
                for (var k = 0; k < found.length; k++) {
                    if (checkFunction(found[k])) {
                        currentContext[currentContextIndex++] = found[k];
                    }
                }
                continue;
            }
            //如果没有 # . [ 这样的特殊字符，我们就当是tagName
            var tagName = token;
            var found = new Array;
            var foundCount = 0;
            for (var h = 0; h < currentContext.length; h++) {
                var elements = currentContext[h].getElementsByTgaName(tagName);
                for (var j = 0; j < elements.length; j++) {
                    found[foundCount++] = elements[j];
                }
            }
            currentContext = found;
        }
        return currentContext; //返回最后的选集
    }

    #aa p.bbb [ccc=ddd]

h1 {color: red;font-size: 14px;}

    function getChildren(el) {
        if (el.childElementCount) {
            return [].slice.call(el.children);
        }
        var ret = [];
        for (var node = el.firstChild; node; node = node.nextSibling) {
            node.nodeType == 1 && ret.push(node);
        }
        return ret;
    }

    function getNext (el) {
        if ("nextElementSibling" in el) {
            return el.nextElementSibling
        }
        while (el = el.nextSibling) {
            if (el.nodeType === 1) {
                return el;
            }
        }
        return null
    }

    function getPrev(el) {
        if ("previousElementSibling" in el) {
            return el.previousElementSibling;
        }
        while (el = el.previousSibling) {
            if (el.nodeType === 1) {
                return el;
            }
        }
        return null;
    }