Pre-querySelectorAll 브라우저에서 속성별로 요소를 검색하는 방법은 무엇입니까?

Pre-querySelectorAll 브라우저에서 속성으로 요소 검색

IE9 이전 브라우저에는 강력한 querySelectorAll() 메서드가 부족하여 다음을 기반으로 요소를 검색해야 할 때 문제가 됩니다. 특정 속성. 이 문제를 해결하기 위해 IE7 이상에서 작동하는 기본 솔루션을 살펴보겠습니다.

getElementsByTagName 및 속성 확인 사용

getElementsByTagName 메서드를 활용하여 querySelectorAll의 기능을 시뮬레이션할 수 있습니다. 특정 속성이 있는 요소를 찾기 위해 getAllElementsWithAttribute라는 함수를 만들어 보겠습니다.

<code class="js">function getAllElementsWithAttribute(attribute) {
  var matchingElements = [];
  var allElements = document.getElementsByTagName('*');
  for (var i = 0, n = allElements.length; i < n; i++) {
    if (allElements[i].getAttribute(attribute) !== null) {
      // Element has the attribute. Add it to the array.
      matchingElements.push(allElements[i]);
    }
  }
  return matchingElements;
}</code>

이 함수는 속성 이름을 인수로 사용하고 문서의 모든 요소를 ​​반복합니다. 각 요소에 대해 지정된 속성이 존재하고 null이 아닌지 확인합니다. 그렇다면 해당 요소는 일치하는 요소의 배열에 추가됩니다.

사용 예

data-foo 속성이 있는 모든 요소를 ​​검색하려면 다음을 호출하세요.

<code class="js">getAllElementsWithAttribute('data-foo');</code>

이 접근 방식은 querySelectorAll이 없는 브라우저에서 속성별로 요소를 검색하기 위한 기본 솔루션을 제공하여 IE7 이상과의 호환성을 보장합니다.

위 내용은 Pre-querySelectorAll 브라우저에서 속성별로 요소를 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!