JavaScript Document 객체

Document 객체

Document 객체는 웹 페이지 그 자체를 의미한다.

웹 페이지의 html을 쓸 때는 Document객체부터 써야 한다.

 

Document 메소드

Document 객체는 HTML 요소와 관련된 작업을 도와주는 다양한 메소드를 제공한다.

 

1. html 요소 선택 메소드의 종류

document.getElementsByTagName(태그이름)	해당 태그 이름의 요소를 모두 선택.
document.getElementById(아이디)	해당 아이디의 요소를 선택.
document.getElementsByClassName(클래스이름)	해당 클래스에 속한 요소를 모두 선택.
document.getElementsByName(name속성값)	해당 name 속성값을 가지는 요소를 모두 선택.
document.querySelectorAll(선택자)	해당 선택자로 선택되는 요소를 모두 선택.

 

2. html 요소의 생성 메소드의 종류

document.createElement(HTML요소)	지정된 HTML 요소를 생성.
document.write(텍스트)	HTML 출력 스트림을 통해 텍스트를 출력.

 

3. html이벤트 핸들러 추가 메소드의 종류

document.getElementById(아이디).onclick = function(){ 실행할 코드 }

마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가함.

 

이벤트 리스너

이벤트가 발생했을때 그 처리를 담당하는 함수.

 

 

1. UI 이벤트-사용자가 웹 페이지가 아닌 브라우저의 UI와 상호작용할때 발생.

이벤트	설명
load	웹 페이지의 로드가 완료되었을 때
unload	웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우
resize	브라우저의 창 크기를 조정했을 때
scroll	사용자가 페이지를 위아래로 스크롤 할 때

 

2. 키보드 이벤트 – 사용자가 키보드를 이용할 때 발생한다.

이벤트	설명
keydown	사용자가 키를 처음 눌렀을 때
keyup	키를 땔 때
keypress	사용자가 눌렀던 키의 문자가 입력되었을 때

 

3. 마우스 이벤트 – 사용자가 마우스나 터치화면을 사용할 때 발생

이벤트	설명
click	사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때
dbclick	두 번 눌렀다 땔 때
mousedown	마우스를 누르고 있을 때
mouseup	눌렀던 마우스 버튼을 땔 때
mousemove	마우스를 움직였을 때
mouseover	요소 위로 마우스를 움직였을 때
mouseout	요소 바깥으로 마우스를 움직였을 때

 

4. 포커스 이벤트 

이벤트	설명
focus	요소가 포커스를 얻었을 때
blur	요소가 포커스를 잃었을 때

 

 

5. 폼 이벤트 

이벤트	설명
input	<input>,<textarea>요소 값이 변경되었을 때
change	선택 상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때
submit	사용자가 버튼키를 이용하여 폼을 제출할 때
reset	리셋 버튼을 클릭할 때
cut	폼 필드의 콘텐츠를 잘라내기 했을 때
copy	폼 필드의 콘텐츠를 복사했을 때
paste	폼 필드의 콘텐츠를 붙여넣을 때
select	텍스트를 선택했을 때

대략 이정도가 있고 이벤트 리스너들 중에서  클릭 이벤트 리스너가 가장 많이 쓰이는데 클릭 이벤트 리스너란 'click' 이벤트는 사용자가 마우스로 클릭할 때 발생하는 것이다.