getElementsByClassName 특성에 대해서 질문있습니다.

Question

<p class="myclass">Hello</p>
<p>Hello</p>
<p class="my">Hello</p>
<p class="myclass">Hello</p>
<p class="myclass">Hello</p>

 

이런식으로 같은 클래스명을 가진 여러개의 태그가 있을때, CSS로 스타일을 줄때는 .CSS{주고 싶은 스타일} 하면 일괄 적용되잖습니까?

근데 자바스크립트, 그니깐 getElementsByClassName으로 접근해서 스타일을 주면 일괄적용 되지 않는 이유가 궁금합니다.

 

function addStyle() {
    var el = document.getElementsByClassName("myclass");
   
  el.style.backgroundColor = "yellow";
  el.style.border = "1px solid red";

}

 

이런식으로 하면 안먹히고 el[숫자]를 줘서 클래스 갯수만큼 복사해서 붙여넣기를 하거나, 선생님이 짜신것처럼 for문으로 짜서 el[i]에다가 스타일을 줘야 적용되는 이유가 궁금합니다.

 

아이디에 스타일을 줄때는 getElementById로 접근해서 주면 한번에 됬는데, 클래스는 저런식으로 사용할수 없는 이유가 궁금합니다.

 

그냥 문법적으로 그렇게 정해져있는 것 뿐인가요? getElementsByClassName을 사용할때는 for문이랑 같이 사용해야한다고 그냥 외우면 되나요?

 

 

제가 질문한 코드 입니다.

https://jsfiddle.net/jongmin/9mokozqx/

Answer 1

getElementById() 메소드는 유일한 ID를 가진 엘리먼트를 찾아 객체로 반환합니다. 즉 반환되는 객체는 오직 하나입니다. 따라서 바로 Element 객체의 가능한 메소드를 적용해도 되지만

getElementsByClassName()을 포함한 getElementsByTagName(), getElementsByName() 메소드는 반환되는 객체가 복수일 수 있으므로 집합체인 컬렉션 타입(배열)으로 반환합니다. 따라서 for 문을 이용한 처리가 필요할 수 밖에 없습니다.

jQuery를 이용하면 순환문 없이 바로 원하는 처리를 할 수 있게 합니다. 그러나 그 안을 들여다보면 결국은 순환문을 이용해서 처리할 것입니다. 단지 그런일을 할 수 있는 메소드를 우리는 간단하게 쓰는 것 입니다. 그게 jQuery를 사용하는 이유이니까요.