최신 게시글(WEB)
HOME > WEB > 최신 게시글(WEB)
2020.01.28 / 24:46

getElementsByClassName() 함수 , 자바스크립트 클래스명 접근

까치설날
추천 수 254
이 함수는 태그의 class="" 속성을 사용하여 접근한다.

동일한 class명이 존재할수 있기때문에  ( id속성은 html 문서에 동일한 id속성이 존재하면 안된다..) 

id 속성을 사용하여 접근하는 getElementById() 와 달리 getElementsByClassName() 은 컬렉션 객체를 반환한다.

따라서 for문을 사용하거나 특정 index에 위치한 element를 반환받아 사용할수있다.

사용예는 아래와 같다.


js
			var section1s = document.getElementsByClassName("section1");
			var section2s = document.getElementsByClassName("section2");

			for( var i = 0; i < section1s.length; i++ ){
				var section1 = section1s.item(i);
				section1.style.border = "1px solid #0000ff";
			}
			
			for( var i = 0; i < section2s.length; i++ ){
				var section2 = section2s.item(i);
				section2.style.border = "1px solid #ff0000"
			}
html
	
	
div

	
	
    1
		
  1. 1-1
    2. 
		
  2. 1-2
    3. 
		
  3. 1-3
    4. 
	

	
	
div

	
	
    2
		
  1. 2-1
    2. 
		
  2. 2-2
    3. 
		
  3. 2-3
    4.


div
    1
  1. 1-1
  2. 1-2
  3. 1-3
div
    2
  1. 2-1
  2. 2-2
  3. 2-3



출처: https://javacpro.tistory.com/35 [버물리의 IT공부]