將HTML5查詢選擇器添加到瀏覽器不支持它

我一直在使用HTML5 selectors API又名querySelector。這些選擇器非常易於使用和少數。如果你不熟悉這個API，它與jQuery選擇器API非常相似，它們會得到一個CSS選擇器字符串並選擇正確的元素。例如，這些選擇的工作一樣：將HTML5查詢選擇器添加到瀏覽器不支持它

jQuery('#div') == document.querySelectorAll('#div') 

jQuery('.myClass a') == document.querySelectorAll('.myClass a');

這個API的Browser support是相當不錯的。 IE8支持他們。只有兩個不支持這個API的瀏覽器是IE7和IE6。我正在尋找將此功能添加到IE7和IE6的解決方案。對我而言，querySelectorAll和querySelector就足夠了，但如果有辦法實現更多功能，那就太棒了！

我開始研究jQuery code，他們之前做過這樣的事情，所以這將是一個很好的地方，看看他們如何創建選擇器API，但我不明白代碼。任何想法？

來源

2011-09-23 Mohsen

您可以簡單地使用jQuery使用的原始Sizzle引擎（由John Resig撰寫，jQuery的作者）。

這裏的灒自己的描述：

一個純粹的JavaScript CSS選擇器引擎，旨在到一個主機庫中容易掉線。

如果你想確保你不使用Sizzle如果querySelectorAll的原生支持（儘管灒將始終可用時使用querySelectorAll），使用此：

if (! document.querySelectorAll) document.querySelectorAll = Sizzle;

來源

2011-09-23 01:49:12

+1當我只需要一個選擇器引擎並且還沒有jQuery並且它是幾個framwworks中的引擎時，Sizzle就是我使用的。 Sizzle足夠聰明，可以在存在時使用多個本地選擇器函數，並在不存在時自行實現它們。 – jfriend00

如何使用querySelectors實現？我的意思是，如果開發人員使用querySelector，並且在瀏覽器中不支持查詢選擇器，則會使用它。主要是我想要一個後備。我更喜歡使用查詢選擇器的原因是速度更快，語法更好。 – Mohsen

很酷，你說得對。它使用querySelector（如果可用）。你的答案被選爲正確的答案。 :)感謝 – Mohsen

它使用複雜的選擇器來查找元素通常是一個糟糕的主意，因爲它將腳本功能與文檔的佈局和表示緊緊地綁定在一起。應採用更簡單的策略，例如在文檔中使用ID，類或分組元素。

如果你這樣做，然後分析你的要求，你可能會發現你只需要幾個簡單的選擇器。在這種情況下，訪問元素的標準DOM方法可能會完成90％的工作，您只需添加一些過濾。例如'#id'只是getElementById（這是jQuery/Sizzle有效地用於該選擇器），'.myClass a'可以使用一個相當簡單的getElementsByClassname函數（大多數瀏覽器都內置一個），並帶有A元素過濾器。

當然，這些功能可能會首先測試qSA支持並使用它（如果可用）。

還要注意，已經有很多活文檔集合可以非常有效地使用，並且早期的DOM集合（如getElementsByTagName）也是活的。我很確定qSA返回靜態集合，因爲這是帶有選擇器的javascript庫一直在做的事情。無論如何，思考的食物。

來源

2011-09-23 02:03:56 RobG

怎麼樣'document.getElementById（'bigDiv'）。getElementsByTagName（'li'）''而不是document.querySelectorAll（'＃bigDiv li'）'？我覺得你抵制新技術 – Mohsen

我覺得你的注意力缺乏。也許這行**當然這些函數可以首先測試qSA的支持，如果可用的話**使用它應該是粗體。 – RobG

將HTML5查詢選擇器添加到瀏覽器不支持它

回答

相關問題