JavaScript로 GetElementById 대신 getElementByClass를 사용하는 방법은 무엇입니까?

Question 1

각 DIV의 클래스에 따라 웹 사이트에서 특정 DIV 요소의 가시성을 전환하려고합니다. 나는 그것들을 토글하기 위해 기본 JavaScript 스 니펫을 사용하고 있습니다. 문제는 스크립트 가 JavaScript에서 지원되지 않는 getElementById것처럼 만 사용한다는 것 getElementByClass입니다. 그리고 불행히도 DIV 이름은 특정 카테고리 이름을 사용하여 내 XSLT 스타일 시트에 의해 동적으로 생성되기 때문에 DIV 이름을 지정하는 데 id가 아닌 class를 사용해야합니다.

특정 브라우저가 이제를 지원한다는 것을 알고 getElementByClass있지만 Internet Explorer가 지원 하지 않기 때문에 해당 경로를 사용하고 싶지 않습니다.

함수를 사용하여 클래스별로 요소를 가져 오는 스크립트를 찾았 지만 (예 :이 페이지의 # 8 : http://www.dustindiaz.com/top-ten-javascript/ ) 통합 방법을 알 수 없습니다. 내 토글 스크립트와 함께.

다음은 HTML 코드입니다. DIV 자체는 XML / XSLT를 사용하여 페이지로드시 생성되므로 누락되었습니다.

주요 질문 : ID로 요소를 가져 오는 대신 클래스별로 요소를 얻으려면 아래 Toggle 스크립트를 어떻게 얻습니까?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<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>

</body>
</html>

Question 2

최신 브라우저는 document.getElementsByClassName. caniuse 에서이 기능을 제공하는 공급 업체에 대한 전체 분석을 볼 수 있습니다 . 지원을 이전 브라우저로 확장하려는 경우 jQuery 또는 polyfill에있는 것과 같은 선택기 엔진을 고려할 수 있습니다.

이전 답변

다음을 허용하는 jQuery 를 확인하고 싶을 것입니다.

$(".classname").hide(); // hides everything with class 'classname'

Google은 호스팅 된 jQuery 소스 파일을 제공하므로이를 참조하고 순식간에 실행할 수 있습니다. 페이지에 다음을 포함하십시오.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

Question 3

이 getElementsByClassName방법은 이제 Firefox, Safari, Chrome, IE 및 Opera의 최신 버전에서 기본적으로 지원됩니다. 기본 구현이 사용 가능한지 확인하는 기능을 만들 수 있습니다. 그렇지 않으면 Dustin Diaz 방법을 사용하십시오.

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

용법:

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

Question 4

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

Acyually는 getElementsByClassName을 사용하여 여러 클래스의 배열을 반환합니다. 동일한 HTML 페이지 내의 여러 인스턴스에서 동일한 클래스 이름을 사용할 수 있기 때문입니다. 필요한 클래스를 대상으로 배열 요소 ID를 사용합니다. 제 경우에는 주어진 클래스 이름의 첫 번째 인스턴스입니다. 그래서 저는 [0]을 사용했습니다.

Question 5

Javascript의 클래스에 액세스하는 데 사용하십시오.

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

Question 6

CMS의 답변에 추가하면 이것은 toggle_visibility내가 방금 사용한 것 보다 일반적인 접근 방식입니다 .

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

Question 7

내 솔루션 :

먼저 ID로 "<style>"태그를 만듭니다.

<style id="YourID">
    .YourClass {background-color:red}
</style>

그런 다음 JavaScript에서 다음과 같은 함수를 만듭니다.

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

나를 위해 매력처럼 일했습니다.

Question 8

클래스 선언에 ID 추가

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";