본문 바로가기
Frontend/Javascript

[Javascript] Javascript 활용문법(DOM)

by worldcenter 2024. 8. 11.

 

 

문서 객체 모델(DOM : Document Object Model)

DOM 이란 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 입니다.

HTML 언어로 작성한 웹 문서의 DOM을 HTML DOM 이라고 하며, XML 문서에서 사용하는 XML DOM도 있습니다.

DOM은 웹 문서를 하나의 객체로 정의합니다. 그리고 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의합니다.

예를 들어, 웹 문서 전체는 document 객체이고, 삽입한 이미지는 image 객체 입니다.

이처럼 DOM은 웹 문서와 그 안의 모든 요소를 '객체'로 인식하고 처리합니다.

 

 

Javascript로 alert 띄우기

# 함수 만들기
<style>
  function hey(){
	alert('안녕!');
  }
</style>
# 버튼에 함수 연결하기
<button class="form-button" type="button" onclick="hey()">영화 기록하기</button>

 

 

Javascript로 HTML 조작

function hey(){
	alert('안녕!');
	document.getElementById('hello').style.color = 'red';
}