getElementByClass가 지원되지 않는 경우 JavaScript에서 클래스별로 요소를 어떻게 검색합니까?

JavaScript에서 클래스별 요소 가져오기

JavaScript에서 getElementById 메서드는 일반적으로 고유 식별자로 요소를 검색하는 데 사용됩니다. 그러나 일부 시나리오에서는 클래스 이름을 기반으로 요소를 검색해야 하며 JavaScript는 기본적으로 getElementByClass를 지원하지 않으므로 대체 접근 방식이 필요합니다.

Dustin Diaz 메서드:

클래스별로 요소를 검색하는 한 가지 방법은 Dustin Diaz가 만든 함수입니다.

<code class="javascript">function getElementByClass(searchClass, node) {
  if (node == null) {
    node = document;
  }

  var classElements = [];
  var els = node.getElementsByTagName("*");
  var elsLen = els.length;
  var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)", "i");
  var i;
  var j = 0;

  for (i = 0; i < elsLen; i++) {
    if (pattern.test(els[i].className)) {
      classElements[j] = els[i];
      j++;
    }
  }

  return classElements;
}</code>

사용법:

이 함수는 토글 스크립트와 함께 사용할 수 있습니다. 질문에 제공됨:

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementByClass(className, document);
  var n = elements.length;

  for (var i = 0; i < n; i++) {
    var e = elements[i];

    if (e.style.display == "block") {
      e.style.display = "none";
    } else {
      e.style.display = "block";
    }
  }
}</code>

기본 메서드:

Firefox, Chrome, IE 및 Opera와 같은 주요 브라우저의 최신 버전에서는 getElementsByClassName 메서드가 지원됩니다. 기본적으로. 이는 클래스별로 요소를 검색하는 프로세스를 단순화합니다.

<code class="javascript">function getElementsByClassName(className, node) {
  if (node.getElementsByClassName) {
    return node.getElementsByClassName(className);
  } else {
    // Use Dustin Diaz method as fallback
    return getElementByClass(className, node);
  }
}</code>

위 내용은 getElementByClass가 지원되지 않는 경우 JavaScript에서 클래스별로 요소를 어떻게 검색합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!