Ruby's Louvre

每天学习一点点算法

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

属性选择器的对于空白字符的匹配策略

在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;
}

如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码

posted on   司徒正美  阅读(1012)  评论(0编辑  收藏  举报

编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
历史上的今天:
2009-11-05 javascript框架之全局变量
点击右上角即可分享
微信分享提示