IE <= 7에 대해 QuerySelectorAll() 함수를 Element에 추가하는 방법은 무엇입니까?

Question

this article 코드를 사용하여 IE7에서 document에 querySelectorAll을 성공적으로 추가했습니다.

하지만이 같은 요소를 사용하는 오히려 document보다 필요

var containers = document.querySelectorAll('.container'); // Works 
for (var i=0; i<=containers.length; i++) { 
    var container = containers[i]; 
    container.querySelectorAll('a[data-type="people"]'); // Fails 
    // ... 
} 

IE7의 요소에 querySelectorAll를 추가하지 않고 단지보다 document을 할 수있는 방법이 있나요?

Answer 1

매우 흥미로운 질문입니다.

jQuery, Closure 또는 any of several others과 같은 라이브러리를 사용하는 것이 좋습니다. 또는 그냥 Sizzle을 사용합니다 (선택기 엔진 jQuery는 v1.9 분기에서 사용합니다).

그러나 실제로 묻는 질문에 대답 : 당신은 전처리 기능을 통해 요소의 모든 인스턴스를 실행하려는 경우가 아니면 그들에게 querySelectorAll를 추가 할 수 있도록이 (IE7 (슬프게도)에 요소 프로토 타입을 확장 할 수 없습니다

을 예를 들어 Prototype과 MooTools이 작동하는 경우), 요소를 전달하는 별도의 함수가 있어야합니다. 당신이 querySelectorAll이 브라우저에서 qsaWorker을 사용하려는 경우

var qsaWorker = (function() { 
    var idAllocator = 10000; 

    function qsaWorker(element, selector) { 
     var needsID = element.id === ""; 
     if (needsID) { 
      ++idAllocator; 
      element.id = "__qsa" + idAllocator; 
     } 
     try { 
      return document.querySelectorAll("#" + element.id + " " + selector); 
     } 
     finally { 
      if (needsID) { 
       element.id = ""; 
      } 
     } 
    } 

    return qsaWorker; 
})(); 

그리고 물론

이, 당신이 원하는 것 : 그래서에서

function qsaWorker(element, selector) { 
    return element.querySelectorAll(selector); 
} 

을

여기에 그 함수를 작성하는 하나의 방법을이다 총계 : 그럼, 당신은 아마 싶어 :

var qsaWorker = (function() { 
    var idAllocator = 10000; 

    function qsaWorkerShim(element, selector) { 
     var needsID = element.id === ""; 
     if (needsID) { 
      ++idAllocator; 
      element.id = "__qsa" + idAllocator; 
     } 
     try { 
      return document.querySelectorAll("#" + element.id + " " + selector); 
     } 
     finally { 
      if (needsID) { 
       element.id = ""; 
      } 
     } 
    } 

    function qsaWorkerWrap(element, selector) { 
     return element.querySelectorAll(selector); 
    } 

    // Return the one this browser wants to use 
    return document.createElement('div').querySelectorAll ? qsaWorkerWrap : qsaWorkerShim; 
})(); 

당신의 코드 그것을 사용하는 것은 다음과 같을 것이다 :

var containers = document.querySelectorAll('.container'); 
for (var i=0; i<=containers.length; i++) { 
    var container = containers[i]; 
    var links = qsaWorker(container, 'a[data-type="people"]'); // <== Changed 
    // ... 
} 

그러나 다시, 나는 라이브러리를 사용하는 방향으로 의지하는 경향이 ...