JavaScript에서 `getElementById` 대신 `getElementsByClassName`을 선택하는 이유는 무엇입니까?

클래스별 요소 가져오기: JavaScript의 getElementById에 대한 대안

웹 개발 영역에서는 getElementById 메서드가 가장 중요합니다. HTML 문서 내의 특정 요소에 액세스합니다. 그러나 getElementByClass를 활용하는 것이 더 적합할 수 있는 경우가 있습니다.

Firefox 및 Chrome과 같은 최신 브라우저가 등장하면서 getElementByClass가 기본적으로 지원되는 기능으로 등장했습니다. 그러나 Internet Explorer와 같은 브라우저의 경우 해당 기능을 에뮬레이트하려면 해결 방법이 필요합니다.

사용자 정의 getElementsByClass 함수 만들기

유명한 JavaScript 전문가인 Dustin Diaz가 고안했습니다. 기본 getElementByClass 지원 부족을 해결하는 독창적인 솔루션입니다. 그의 접근 방식에는 동작을 모방하는 사용자 정의 함수를 만드는 것이 포함됩니다.

<code class="javascript">function getElementsByClassName(node, classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    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);
  }
}</code>

토글 스크립트와 함수 통합

이 사용자 정의 함수를 제공된 토글과 원활하게 통합하려면 스크립트에서 표시된 대로 getElementById 호출을 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>

결론

이 사용자 정의 getElementsByClass 함수를 구현하면 getElementByClass에 대한 기본 지원이 있는 경우에도 클래스 속성을 활용하여 요소의 가시성을 전환할 수 있습니다. 부족하다. 이 솔루션을 통해 개발자는 클래스 기반 요소 식별의 이점을 활용하여 다양한 브라우저에서 일관된 동작을 보장할 수 있습니다.

위 내용은 JavaScript에서 `getElementById` 대신 `getElementsByClassName`을 선택하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!