zoukankan      html  css  js  c++  java
  • 属性选择器的对于空白字符的匹配策略

    在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>
    
    日志: [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;
                                    }
    
  • 相关阅读:
    国内乡村安防全面建设仍需推进,EasyNVR/EasyGBS/EasyCVR平台助力治安防控
    TSINGSEE青犀视频播放视频流的编码格式和封装格式有什么关系?
    全景摄像头怎么接入网页进行视频直播?
    EasyNTS编译报错could not read Username for XXXXX
    【LOJ#3005】Limited Memory
    【BZOJ2407】探险
    【洛谷P4480】餐巾计划问题
    【CF163E】e-Government
    【洛谷P4332】三叉神经树
    【洛谷P7518】宝石
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/2236756.html
Copyright © 2011-2022 走看看