JavaScript에서 클래스 이름으로 HTML 요소를 선택하는 방법은 무엇입니까?

JavaScript로 ElementByClass를 얻는 방법

질문:

가시성을 전환하려고 합니다. JavaScript 스니펫을 사용하여 클래스를 기반으로 DIV 요소를 구성합니다. 그러나 현재 스크립트는 getElementById에 의존하는데, 이는 DIV 이름이 XSLT를 사용하여 동적으로 생성되기 때문에 적합하지 않습니다.

답변:

getElementsByClassName 메서드:

최신 브라우저는 기본적으로 getElementsByClassName 메서드를 지원합니다. 사용 가능 여부를 확인하고 지원되는 경우 사용할 수 있습니다.

Dustin Diaz 방법(이전 브라우저의 경우):

이전 브라우저의 경우 Dustin Diaz 방법을 사용하세요.

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

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

업데이트된 토글 스크립트:

토글 스크립트에서 getElementsByClassName 메소드 또는 Dustin Diaz 폴백을 활용하세요:

<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';
     }
  }
}

사용법 :

HTML에서 새로운ggle_visibility 함수를 참조하도록 토글 링크의 onclick 속성을 수정합니다.

<code class="html"><a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>
<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a></code>

위 내용은 JavaScript에서 클래스 이름으로 HTML 요소를 선택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!