getElementById 없이 JavaScript를 사용하여 클래스별로 요소를 가져오는 방법은 무엇입니까?

getElementById 없이 JavaScript를 사용하여 클래스별로 요소 가져오기

JavaScript에서 getElementById 메서드는 일반적으로 고유 ID로 요소를 검색하는 데 사용됩니다. 그러나 동적으로 생성된 요소나 동일한 ID를 공유하는 요소로 작업할 때는 클래스 속성으로 요소를 찾아야 합니다. getElementByClass는 최신 브라우저에서 기본적으로 지원되지만 Internet Explorer와 같은 모든 주요 브라우저에서는 여전히 지원되지 않습니다.

함수를 사용하여 클래스별 요소 가져오기

JavaScript는 클래스별로 요소를 검색하는 내장 메소드를 제공하지 않습니다. 그러나 클래스 속성을 기반으로 요소를 검색하는 함수를 사용하면 이러한 제한을 극복할 수 있습니다. 널리 사용되는 구현 중 하나는 Dustin Diaz 방법입니다.

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // native implementation available
    return node.getElementsByClassName(classname);
  } else {
    var classElements = [],
        els = node.getElementsByTagName("*"),
        elsLen = els.length,
        pattern = new RegExp("(^|\s)"+classname+"(\s|$)", "i");

    for (var i = 0, j = 0; i < elsLen; i++) {
      if ( pattern.test(els[i].className) ) {
          classElements[j] = els[i];
          j++;
      }
    }
    return classElements;
  }
}</code>

이 함수는 노드(일반적으로 문서 개체)와 클래스 이름을 입력으로 사용하고 지정된 클래스와 일치하는 요소 배열을 반환합니다. 먼저 기본 getElementsByClassName 메서드가 있는지 확인하고, 있으면 이를 사용합니다. 그렇지 않으면 노드의 모든 요소를 ​​반복하여 해당 클래스 속성에 지정된 클래스 이름이 포함되어 있는지 확인합니다.

토글 스크립트와 통합

함수가 있으면 클래스별로 요소를 가져오려면 표시 여부 전환 스크립트를 수정하여 사용할 수 있습니다.

<code class="javascript">function toggle_visibility(className) {
  var elements = getElementsByClassName(document, className),
      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>

getElementById 함수 호출을 getElementsByClassName 함수로 대체하면 이제 스크립트에서 클래스를 기반으로 요소의 표시 여부를 전환할 수 있습니다. 기인하다. 이를 통해 고유 ID에 의존하지 않고 동적으로 생성된 요소의 가시성을 제어할 수 있습니다.

위 내용은 getElementById 없이 JavaScript를 사용하여 클래스별로 요소를 가져오는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!