> 웹 프론트엔드 > JS 튜토리얼 > getElementByClass가 지원되지 않는 경우 JavaScript에서 클래스별로 요소를 어떻게 검색합니까?

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

Barbara Streisand
풀어 주다: 2024-11-07 03:07:02
원래의
275명이 탐색했습니다.

How do you retrieve elements by class in JavaScript when getElementByClass is not supported?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿