[JSP] <JavaScript> DOM

DOM이란

◎ Document Object Model의 약자이다.

◎ 마크업 언어로 작성된 문서를 프로그래밍 언어가 이해하고 조작할 수 있는 객체 모델로 변환한다.

◎ JavaScript와 같은 스크립팅 언어를 사용하여 웹 페이지의 요소를 동적으로 조작하고 수정할 수 있다.

예제 코드

// JavaScript를 사용하여 DOM을 조작하는 부분
document.addEventListener('DOMContentLoaded', function() {
	// 색상 변경을 위한 함수 정의
	function changeColor() {
    		// 랜덤한 RGB 값 생성
		var red = Math.floor(Math.random() * 256);
		var green = Math.floor(Math.random() * 256);
		var blue = Math.floor(Math.random() * 256);

		// 색상 문자열 생성
		var color = 'rgb(' + red + ',' + green + ',' + blue + ')';

		// colorBox 요소를 가져와서 배경색을 변경
		var box = document.getElementById('colorBox');
		box.style.backgroundColor = color;
	}

	// colorBox를 클릭할 때마다 색상 변경	
	var box = document.getElementById('colorBox');
	box.addEventListener('click', changeColor);
});