2023. 7. 24. 18:14ㆍ카테고리 없음
Document 객체는 웹 페이지 그 자체를 의미합니다.
웹 페이지에 존재하는 HTML 요소에 접근해야 할 때 반드시 Document 객체부터 시작하는 특징이 있습니다.
[document 객체의 메서드]
1. document.createElement(): 새로운 htmlElement 객체 생성
2. document.getElementByld(): id 속성으로 HTMLElement 객체 탐색
3.document.getElementsByClassName(): class속성으로 HTMLElement 객체 탐색
4. doucument.getElementsByTagName():태그 이름으로 HTMLElenment 객체 탐색
5. doucument.appendChild():지정한 객체를 HTML 요소의 마지막 자식노드로 추가
이 밖에도 간단하게
clear () : 문서 안의 내용을 깨끗하게 지움
close () : open ()메서드를 통해 기록하기 시작한 문서의 기록을 종료
open () : 문서에 내용을 입력하기 시작함
write () : 문서에 내용 표시
writeln () : 문서에 내용 표시하는데, 메서드를 적용할 때마다 새로운 줄에 표시 등 여러 메서드가 존재합니다.
[document 객체의 이벤트 리스너]
Event란브라우저에서 사용자에 의해 일어나는 특정한 행동을 의미합니다.
(예를 들어) 마우스 클릭, 스크롤, 키보드입력, 뒤로가기 등
이벤트 리스너는
같은 이벤트라도 여러 개의 리스너를 등록할 수 있다는 특징이 있습니다.
이벤트 리스너는 자바스크립트 코드 내에서는 확인할 수 없고, 개발자 도구를 이용해 확인해야 하며
아래와 같은 코드를 통해 확인 할 수 있습니다.
getEventListeners()이벤트의 종류는 아래와 같이 매우 다양합니다.
<UI 이벤트>
| load | 웹페이지나 스크립트의 로드가 완료되었을 때 |
| unload | 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우) |
| error | 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 |
| resize | 브라우저 창의 크기를 조절했을 때 |
| scroll | 사용자가 페이지를 위아래로 스크롤할 때 |
| select | 텍스트를 선택했을 때 |
<Keyboard 이벤트>
| keydown | 키를 누르고 있을 때 |
| keyup | 누르고 있던 키를 뗄 때 |
| keypress | 키를 누르고 뗏을 때 |
| keyCode | 키 코드값 |
<Mouse 이벤트>
| click | 마우스 버튼을 클릭했을 때 |
| dbclick | 마우스 버튼을 더블 클릭했을 때 |
| mousedown | 마우스 버튼을 누르고 있을 때 |
| mouseup | 누르고 있던 마우스 버튼을 뗄 때 |
| mousemove | 마우스를 움직일 때 (터치스크린에서 동작하지 않는다) |
| mouseover | 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다) |
| mouseout | 마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다) |
| mouserenter | 해당 요소에 마우스 커서를 올려다놓았을때 |
| mouseleave | 해당 요소에 마우스 커서를 빼낼때 |
<Focus 이벤트>
| focus/focusin | 요소가 포커스를 얻었을 때 |
| blur/foucusout | 요소가 포커스를 잃었을 |
<Form 이벤트>
| input | input또는 textarea요소 값이나 contenteditable특성을 가진 요소 값이 변경되었을 때 |
| change | select box, checkbox, radio button의 상태가 변경되었을 때 |
| submit | form을 submit할 때 (버튼 또는 키) |
| reset | reset 버튼을 클릭할 때 (최근에는 사용 안함) |
<Clipboard 이벤트>
| cut | 콘텐츠를 잘라내기할 때 |
| copy | 콘텐츠를 복사할 때 |
| paste | 콘텐츠를 붙여넣기할 때 |