querySelector用法改進

來源:互聯網
上載者:User

原來選取器只支援一個上下文,並對IE8的BUG進行了規避

     if (!flag_xml && doc.querySelectorAll) {//FF,opera,chrome,safari的XML文檔也實現了querySelectorAll介面,但不能用                var query = expr;//IE的getElementsByTagName,querySelectorAll對OBJECT元素的孩子的尋找都存在問題                if( doc.documentMode === 8 && context.nodeType === 1 && context.nodeName.toLowerCase() !== "object"){                    var id = context.getAttribute( "id" ),uid = context.uniqueID//IE8在上下文為元素節時,搜尋結果包含自己                    if ( !id ) {                        context.setAttribute( "id", uid );                    }                    try {                        return pushResult(context.querySelectorAll( "#" + uid + " " + query ),result,flag_multi);                    } catch(e) {                    } finally {                        if ( id == context.uniqueID ) {                            context.removeAttribute( "id" );                        }                    }                }else{                    if(/\!\=/.test(query))//手動支援 E[Attr!=Val]                        query = query.replace(/\[\s*(\w+)\s*!=\s*((['"]*).*?\3)\s*\]/g,":not([$1=$2])");                    try {                        return pushResult( context.querySelectorAll(query) ,result,flag_multi);                    } catch(e) {}                }            }

改進如下,現在只需規避IE的OBJECT bug。

            if (!flag_xml && doc.querySelectorAll) {//http://www.w3.org/TR/selectors/                node = context;//使用替身,以便在多上下文實現不重排尋找                var useContains = false;                if(contexts.length > 2 || doc.documentMode === 8 && context.nodeType === 1){                    node = doc;                    useContains = true;                }                if(doc.documentMode !== 8  ||  node.nodeName.toLowerCase() !== "object"){                    try{                        nodes = pushResult( node.querySelectorAll(expr) ,result,flag_multi);                        var ret = []                        if(useContains && nodes.length){                            var cn = contexts.length;                            for(i = 0, ri = 0; i 

另一種改進是,通過對元素節點的上下文添加一個類名,這樣尋找就可以一步到位。不足之處就是前前後後要對類進行操作。

            if (!flag_xml && doc.querySelectorAll) {                var query = expr;                if(contexts.length > 2 || doc.documentMode == 8  && context.nodeType == 1  ){                    if(contexts.length > 2 )                        context = doc;                    query = ".fix_icarus_sqa "+query;//IE8也要使用類名確保尋找範圍                    for(i = 0; node = contexts[i++];){                        if(node.nodeType === 1){                            node.className = "fix_icarus_sqa " + node.className;                        }                    }                }                if(doc.documentMode !== 8  || context.nodeName.toLowerCase() !== "object"){                    try{                        result = pushResult( context.querySelectorAll(query) ,result,flag_multi);                        if(query.indexOf(".fix_icarus_sqa") === 0 ){//如果為上下文添加了類名,就要去類名                            for(i = 0; node = contexts[i++];){                                if(node.nodeType === 1){                                    node.className =  node.className.replace(" fix_icarus_sqa","");                                }                            }                        }                        return result;                    }catch(e){}                }            }

但顯然對類進行操作對調用dom.contains快捷得多了。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.