[Javascript] getElementsByClassName 사용시 주의점

특정 클래스명들을 땡겨올 수 있는 놈이 getElementsByClassName 인데 이는 복수의 배열처리로 연결됨을 꼭 주시해 주기 바란다. 

 

getElementById("o_btn")[0]

getElementById("o_btn")[1]

getElementById("o_btn")[2]

...

이런식으로 index 처리로 여러개의 o_btn class 명들이 있을때 그 순번을 0,1,2 각각 이런식으로 대응된다.

 

 

cf ) getElementById 는 단일의 id 값을 땡겨올때 (복수가 아니다)

 

아래의 예제를 참고해보자 ~

 

<style>
.o_btn {background:#999; color:#fff;}
.x_btn {background:#999; color:#fff;}
</style>
 
 
<ul class="ox_list">
    <li><div class="o_btn" onclick="btnColorClick('o')">O</div></li>
    <li><div class="x_btn" onclick="btnColorClick('x')">X</div></li>
</ul>
 
<form name="f1" method="get">
    <input type="hidden" id="ans1"  name="ans1"  value="">
</form>
 
<script>
function btnColorClick(mode) {
    switch(mode)
    {
        case "o" : 
            document.getElementsByClassName("o_btn")[0].style.backgroundColor="#143c8c";
            document.getElementsByClassName("x_btn")[0].style.backgroundColor="#999";
            document.getElementById("ans1").value="0";
            break;
        case "x" :
            document.getElementsByClassName("o_btn")[0].style.backgroundColor="#999";
            document.getElementsByClassName("x_btn")[0].style.backgroundColor="#f21d44";
            document.getElementById("ans1").value="1";
            break;
    }
}
</script>