属性选择器的对于空白字符的匹配策略-优快云博客

本文深入探讨了W3C草案中关于属性选择器[att~=val]对空白字符的限制，以及如何在代码中实现这一特性，通过实例展示了属性选择器在不同条件下的行为，特别是对于空值的处理方式。同时介绍了作者自定义的选择器Icarus，详细阐述了其在处理空值和空白字符时的实现逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在w3c草案对属性选择器[att~=val]提到一个点，val不能为空白字符，否则比较值flag(flag为val与元素实际值的比较结果)总返回false，而我写选择器过程中，发现这要求对其他操作符也有效果。

<!DOCTYPE html> <html> <head> <title>属性选择器</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script> window.onload = function(){ console.log(document.querySelector("#test1[title='']")); console.log(document.querySelector("#test1[title~='']")); console.log(document.querySelector("#test1[title|='']")); console.log(document.querySelector("#test1[title^='']")); console.log(document.querySelector("#test1[title$='']")); console.log(document.querySelector("#test1[title*='']")); console.log("===========================================") console.log(document.querySelector("#test2[title='']")); console.log(document.querySelector("#test2[title~='']")); console.log(document.querySelector("#test2[title|='']")); console.log(document.querySelector("#test2[title^='']")); console.log(document.querySelector("#test2[title$='']")); console.log(document.querySelector("#test2[title*='']")); } </script> </head> <body> <div title="" id="test1"></div> <div title="aaa" id="test2"></div> </body> </html>

运行代码

<!DOCTYPE html>
<html>
    <head>
        <title>属性选择器</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            window.onload = function(){
                console.log(document.querySelector("#test1[title='']"));
                console.log(document.querySelector("#test1[title~='']"));
                console.log(document.querySelector("#test1[title|='']"));
                console.log(document.querySelector("#test1[title^='']"));
                console.log(document.querySelector("#test1[title$='']"));
                console.log(document.querySelector("#test1[title*='']"));
                console.log("===========================================")
                console.log(document.querySelector("#test2[title='']"));
                console.log(document.querySelector("#test2[title~='']"));
                console.log(document.querySelector("#test2[title|='']"));
                console.log(document.querySelector("#test2[title^='']"));
                console.log(document.querySelector("#test2[title$='']"));
                console.log(document.querySelector("#test2[title*='']"));
                
            }
                
        </script>
    </head>
    <body>
        <div title="" id="test1"></div>
        <div title="aaa" id="test2"></div>
    </body>
</html>

日志: [object HTMLDivElement] 
日志: null 
日志: [object HTMLDivElement] 
日志: null 
日志: null 
日志: null 
日志: =========================================== 
日志: null 
日志: null 
日志: null 
日志: null 
日志: null 
日志: null

换言之，只要val为空，除=或|=外，flag必为false，并且，对于非=，!=操作符，如果取得值为空白字符，flag也必为false。

下面是我第五代选择器Icarus的相关代码：



                                for (i = 0, ri = 0, elem; elem = elems[i++];) {
                                    if(!op){
                                        flag = Icarus.hasAttribute(elem,name,flag_xml);//[title]
                                    }else if(val === "" && op > 3){
                                        flag = false
                                    }else{
                                        attr = Icarus.getAttribute(elem,name,flag_xml);
                                        switch (op) {
                                            case 1:// = 属性值全等于给出值
                                                flag = attr === val;
                                                break;
                                            case 2://!= 非标准，属性值不等于给出值
                                                flag = attr !== val;
                                                break;
                                            case 3://|= 属性值以“-”分割成两部分，给出值等于其中一部分，或全等于属性值
                                                flag = attr === val || attr.substring(0, val.length + 1) === val + "-";
                                                break;
                                            case 4://~= 属性值为多个单词，给出值为其中一个。
                                                flag = attr !== "" && (" " + attr + " ").indexOf(val) >= 0;
                                                break;
                                            case 5://^= 属性值以给出值开头
                                                flag = attr !== "" && attr.indexOf(val) === 0 ;
                                                break;
                                            case 6://$= 属性值以给出值结尾
                                                flag = attr !== "" && attr.lastIndexOf(val) + val.length === attr.length;
                                                break;
                                            case 7://*= 属性值包含给出值
                                                flag = attr !== "" && attr.indexOf(val) >= 0;
                                                break;
                                        }
                                    }
                                    if (flag ^ flag_not)
                                        tmp[ri++] = elem;
                                }