getElementsByClass

여러 엘리먼트들을 한꺼번에 받아오려고 getElementById()에 document.getElementById('*').style.background ="#FFFFFF";

이런식으로 와일드카드를 쓸 수 없나 조사를 했더니 getElementById는 하나의 엘리먼트값만 받기 때문에 불가능하다는 것.
 와일드 카드를 쓸 수 있는 건 getElementsByTagName 밖에 없는 듯.

여러 클래스들의 엘리먼를 받아오는 메소드는 있다는 말을 듣고 클래스쪽으로 전환.
 메소드명은 getElementByClass가 아니라 getElementsByClassName 이다.

사용법은
 document.getElementsByClassName(className [, parentElement])
  인수: className = 클래스명, parentElement = 부모엘리먼트

'main' ID를 갖고있는 엘리먼트 내에서 'test'클래스를 갖고있는 엘리먼트의 모두를 얻음
  document.getElementById('main').getElementsByClassName('test')

'test' 클래스 내의 모든 노드들을 취득해, id 엘리먼트값을 추출
  var firstSlot = document.getElementsByClassName("test");
  if(firstSlot[0]){
    var nodes = firstSlot[0].childNodes;
    var id = nodes[0].id;
  }

더나아가 JavaScript 1.6의 배열 확장을 더해서 사용해보면,

'test'클래스를 가지고 있는 div 엘리먼트의 모두를 얻음
  Array.filter( document.getElementsByClassName('test'), function(elem){
    return elem.nodeName == 'DIV';
  });

'test'클래스를 가지고 있는 요소의 모두를 얻음(부모엘리먼트도 포함)
  var test = document.getElementsByClassName('test');
  Array.filter( test, function(elem){
    return Array.indexOf( test, elem.parentNode ) > -1;
  });

 또한, 직접 메소드를 만들어서 사용하는 것도 가능.
 getElementsByTagName을 사용해서 태그 네임을 받아온 후 체크를 해서 오브젝트를 얻어낸다.
 

function getElementsByClass(searchClass, node, tag) {
  var classElements = new Array();
  if ( node == null ) node = document;
  if ( tag == null ) tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
  for (i=0, j=0; i < elsLen ; i++) {
    if ( pattern.test(els[i].className) ) {
      classElements[j++] = els[i];
    }
  }
  return classElements;
}

출처 : http://gimmehide.tistory.com/228