属性选择器的对于空白字符的匹配策略
在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 ,或扫描二维码


机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .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框架之全局变量