[JavaScript] getElementsByTagName() 함수 , 자바스크립트 태그명 접근

getElementsByTagName() 함수 , 자바스크립트 태그명 접근

이 함수는 태그의 있는 div, li, p 와 같은 특정 태그명을 가지고 있는 element 의 집합을 가져오는 함수이다.

따라서 반환되는 값은 HTML컬렉션 객체이며 for문 등을 사용하여 element 객체를 사용할수있다.

사용예는 아래와 같다.

js

			var ols = document.getElementsByTagName("ol");
			var lis = document.getElementsByTagName("li");
			var divs = document.getElementsByTagName("div");

			for( var i = 0; i < divs.length; i++ ){
				var div = divs.item(i);
				div.style.border = "1px solid #0000ff";
			}
			
			for( var i = 0; i < ols.length; i++ ){
				var ol = ols.item(i);
				ol.style.border = "1px solid #ff0000"
			}
			for( var i = 0; i < lis.length; i++ ){
				var li = lis.item(i);
				li.style.border = "1px solid #00ff00"
			}

html

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

위의 예제는 div, ol, li 태그의 집합을 가져와 반복문을 사용하여 각 태그별로 border 값을 준 예이다.

결과는 아래 처럼 나오게 된다.