Как сделать document.querySelector работу в IE6

Question

Я работаю на веб-сайте, и я получил яваскрипта функцию, которая не работает в Internet Explorer 6. Я знаю

document.querySelector(selector) 

работают только in Internet Explorer 8+

Что я могу сделать, чтобы он работал в IE6?

(я не пытаюсь заставить его работать для удовольствия;))

Answer 1

Вы можете использовать polyfill, как этот one, однако до сих пор используют IE6, является аналогом IT некромантии.

Указанный полиполн основан на polyfill.js, который может быть найден here, это обеспечивает полисы для множества функций ECMA 5.

Я вывешу текущее состояние сценария, может быть, это будет полезно в будущем (хотя я очень надеюсь, это не будет :)):

if (!document.querySelectorAll) { 
    document.querySelectorAll = function (selectors) { 
     var style = document.createElement('style'), elements = [], element; 
     document.documentElement.firstChild.appendChild(style); 
     document._qsa = []; 

     style.styleSheet.cssText = selectors + 
       '{x-qsa:expression(document._qsa && document._qsa.push(this))}'; 
     window.scrollBy(0, 0); 
     style.parentNode.removeChild(style); 

     while (document._qsa.length) { 
      element = document._qsa.shift(); 
      element.style.removeAttribute('x-qsa'); 
      elements.push(element); 
     } 
     document._qsa = null; 
     return elements; 
    }; 
} 

if (!document.querySelector) { 
    document.querySelector = function (selectors) { 
     var elements = document.querySelectorAll(selectors); 
     return (elements.length) ? elements[0] : null; 
    }; 
} 

Answer 2

Я настоятельно рекомендую вам не попробовать для поддержки IE6.

---

Но вы можете добавить document.querySelector и document.querySelectorAll с помощью this very clever trick from an Ajaxian article. Статья на самом деле немного ошибочна, она добавляет что-то под названием querySelector, которое вместо этого делает querySelectorAll. Я исправил имя здесь:

/*@cc_on 
if (!document.querySelectorAll) 
    document.querySelectorAll = function(selector) 
    { 
     var head = document.documentElement.firstChild; 
     var styleTag = document.createElement("STYLE"); 
     head.appendChild(styleTag); 
     document.__qsResult = []; 

     styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsResult.push(this))}"; 
     window.scrollBy(0, 0); 
     head.removeChild(styleTag); 

     var result = []; 
     for (var i in document.__qsResult) 
      result.push(document.__qsResult[i]); 
     return result; 
    } 
@*/ 

Хотя я бы никогда не лицо, используя for-in подобное; details and alternatives in this other answer.

И умозаключения, querySelector:

/*@cc_on 
if (!document.querySelector) 
    document.querySelector = function(selector) 
    { 
     var head = document.documentElement.firstChild; 
     var styleTag = document.createElement("STYLE"); 
     head.appendChild(styleTag); 
     document.__qsResult = []; 

     styleTag.styleSheet.cssText = selector + "{x:expression(document.__qsResult.push(this))}"; 
     window.scrollBy(0, 0); 
     head.removeChild(styleTag); 

     // Return first result only    
     return document.__qsResult[0] || null; 
    } 
@*/ 

---

Обратите внимание, что ни один из выше добавляет Element#querySelector или Element#querySelectorAll (версии, которые выглядят только внутри элемента), просто document.querySelector и document.querySelectorAll. И вы не можете добавить версии Element на IE6, не добавляя их к каждому отдельному элементу, поскольку IE6 не поддерживает прототипы элементов.