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

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

이 함수는 태그의 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
		
1-3
	
	
	
div
	
	
2
		
2-1
		
2-2
		
2-3
	

div

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

div

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