對(duì)于現(xiàn)代Web前端來說，Selector是必備之物。對(duì)于標(biāo)準(zhǔn)瀏覽器，可用querySelector，而對(duì)于IE8標(biāo)準(zhǔn)模式以下，需要一個(gè)Selector引擎。

因?yàn)楸卷?xiàng)目會(huì)在代碼里使用QWrap，所以雖然我寫的部分代碼并沒有用QWrap，但既然怎樣都需要一個(gè)Selector引擎，不如用QWrap。

結(jié)果發(fā)生一件悲劇的事情。

我使用html5-shim/shiv庫來讓IE正確解析新的HTML5標(biāo)簽。但是QWrap引擎居然不能正確選擇出html5的元素。

嘗試人肉選擇，發(fā)現(xiàn)是可以的，那就是QWrap的Selector存在bug。

經(jīng)過艱苦卓絕的斗爭(zhēng)，最終發(fā)現(xiàn)問題出在這個(gè)函數(shù)的第2行：

 
 
 

  
  
  
function(a) {   
  
  
  
    sFun.push('el.tagName=="' + a.toUpperCase() + '"');  
  
  
  
    return '';  
  
  
  
}).replace(/([\[(].*)|#([\w\-]+)|\.([\w\-]+)/g,//id縮略寫法//className縮略寫法  
 
 
 

QWrap采用了代碼生成技術(shù)，即為selector拼裝出對(duì)應(yīng)的函數(shù)。這是一項(xiàng)相當(dāng)陷阱先進(jìn)的技術(shù)。

不難看出這里會(huì)產(chǎn)生一個(gè)tag的匹配，對(duì)于匹配“nav”所生成的代碼應(yīng)該是：el.tagName=="nav".toUpperCase() 。

通常瀏覽器對(duì)于所有HTML元素，其調(diào)用tagName返回的都是全大寫字母。

【號(hào)外】為什么是大寫?

Hax答：這是從HTML的祖先SGML那里繼承下來的習(xí)慣。對(duì)于早期寫SGML/HTML的人，要區(qū)分標(biāo)簽和正文內(nèi)容的最簡(jiǎn)單方法恐怕就是把標(biāo)簽用大寫。

不過，據(jù)圈子里有名的那個(gè)紋身佬說，HTML用大寫是因?yàn)槟菚r(shí)候技術(shù)落后，存儲(chǔ)太緊張，全大寫比較省存儲(chǔ)空間……(大意如此，詳情我記不清了，請(qǐng)八卦人士咨詢Winter)

【/號(hào)外】

然而不幸的是，html5-shim以及我所知差不多所有的類似庫，都會(huì)使用全小寫。這是因?yàn)楝F(xiàn)代Web標(biāo)準(zhǔn)的主流是采用全小寫。

【號(hào)外】為什么換小寫了涅?

Hax答：因?yàn)檫@樣比較不傷眼，也不傷手。

【/號(hào)外】

而IE雖然對(duì)于它所能識(shí)別的HTML元素都是大小寫不敏感的，但是對(duì)于通過createElement神經(jīng)刀產(chǎn)生的新元素，它其實(shí)將其視作類XML元素，也就是大小寫敏感的，所以其tagName屬性將返回最初設(shè)定的大小寫形式。

如何fix這個(gè)問題?

一個(gè)容易想到的方式是把html5-shim里的標(biāo)簽列表改為大寫。不過這個(gè)方式并不管用。因?yàn)閠agName返回的是最初設(shè)定的值，也就是，如果你寫

...，返回的是SECTION，如果你寫 ...返回的就是SECtion(即start tag的大小寫)，如果你寫document.createElement('sEcTion')，返回的就是sEcTion。

顯然，QWrap Selector(或任何通用腳本庫)不應(yīng)依賴網(wǎng)頁作者如何書寫。所以這個(gè)問題必須由QW來解決。

此外，庫也不應(yīng)該假設(shè)tagName一定返回大寫。雖然規(guī)范規(guī)定對(duì)于HTML元素tagName應(yīng)該始終返回大寫，但庫必須考慮兼容性(即這里所提到的IE的問題)。

此外，通用腳本庫也要有前瞻性，比如考慮Selector引擎用于選擇XML元素。當(dāng)前各種純JS selector engine并非namespace-aware，所以本不能選擇XML元素。但HTML規(guī)范已經(jīng)允許直接在HTML里混合MathML、SVG。新的瀏覽器也都已經(jīng)支持了。

比如你可以試著在FireFox里看下述代碼：

 
 
 

  
  
  
  
  
  
  
$$
  
  
  
    x  
  
  
  
    =  
  
  
  
      
  
  
  
       
  
  
  
      ? b  
  
  
  
      ±  
  
  
  
        
  
  
  
        b 2   
  
  
  
       ?  
  
  
  
       4 ? a ? c  
  
  
  
        
  
  
  
       
  
  
  
       
  
  
  
      2 ? a