JavaScript DOM, Window
DOM(Document Object Model)
현재 자바스크립트가 가장 많이 사용되는 부분은 클라이언트 인터페이스인데, 사용자가 보게 될 화면을 구성하는 것을 말한다.
이 때, 주로 DOM API를 사용하게 되는데,
DOM이란, 자바스크립트에서 HTML 문서에 접근하는 API를 말한다.
Window
- 브라우저의 창을 나타내는 전역 객체
- window 객체는 자바스크립트의 최상위 객체이면서 브라우저와 관련된 멤버를 모두 가지고 있다.
- 전역적으로 사용할 수 있는 대상이 모두 window 객체의 멤버로 할당되어 있다.
document
- window의 멤버로, HTML 문서 (<html>부터 </html> 까지)에 대한 내용을 담는 객체이다.
-
객체 메서드
createElement(x) : 태그의 종류가 문자열인 x인 가상의 요소를 만들어 반환한다.
가령 가상의 div 태그를 만들기 위해 document.createElemnt('div')를 호출한다
getElementById(x) : HTML id 속성값으로 문자열인 x를 가지는 요소를 선택하여 반환한다. 그러한 요소가 없다면 null을 반환
-
객체 속성
body : document의 멤버, body 태그에 대한 멤버를 가지는 객체
head : document의 멤버, head 태그에 대한 멤버를 가지는 객체
HTMLElement
- HTML 태그를 자바스크립트 객체로 표현하기 위한 타입이다.
-
객체 속성
classList : 해당 요소의 HTML class 속성과 관련된 멤버를 가지고 있는 속성
add(x) : 해당 요소의 class 속성에 x 추가
containts(x): 해당 요소가 class 속성에 x를 포함하는가의 여부 반환
remove(x) : 해당 요소의 class 속성에 x를 제거한다
toggle(x) : 해당 요소의 class 속성이 x를 가지고 있다면 제거, 없다면 추가
innerHTML : 해당 요소의 내부 HTML 코드
innerText : 해당 요소의 내부 텍스트
style : 해당 요소의 CSS와 관련된 멤버을 가지고 있는 속성, 해당 속성 사용시, HTML style 속성이 부여된다.
-
객체 메서드
addEventListener(e, f) : 이벤트 e가 발생했을 때 함수 f를 실행하기 위한 이벤트 리스너 추가
이벤트 종류(e)
click : 클릭했을 때의 이벤트, onclick과 같지만 누적까지 된다
focusin : 포커스를 가지게 되었을 때, 실행할 이벤트 함수
focusout : 포커스를 잃게 되었을 때 실행할 이벤트 함수
keydown : 키보드의 키를 눌렀을 때 실행할 이벤트 함수
mousedown : 마우스 버튼을 누럴ㅆ을 때의 이벤트
mouseup : 마우스 버튼을 땟을 때의 이벤트
mousemove : 마우스 커서가 움직일 때의 이벤트
mouseenter : 마우스 커서가 해당 요소에 진입했을 때의 이벤트
mouseleave : 마우스 커서가 해당 요소에서 빠져나갔을 때의 이벤트
wheel : 마우스 휠이 돌아갔을 때의 이벤트
getBoundingClientRect : 호출 대상이 되는 요소의 위치나 크기를 픽셀 단위로 가지고 있는 객체를 반환
querySelector(x) : 호출 대상이 되는 요소의 자식 혹은 자손이면서 CSS 선택자인 문자열 x를 가장 빨리 만족하는 요소 한 개를 반환, 해당되는 게 없으면 null 반환
querySelectorAll(x) : 호출 대상이 되는 요소의 자식 혹은 자손이면서 CSS 선택자인 문자열 x를 만족하는 요소 전체를 인자로 가지는 유사 배열 객체 NodeList를 반환,
해당되는 게 없으면 길이가 0인 유사 배열 객체 NodeList 반환
-
객체 이벤트
onclick : 클릭했을 때 실행할 이벤트 함수, click과 같지만 누적이 안된다.
onfocusin : 포커스를 가지게 되었을 때, 실행할 이벤트 함수
onfocusout : 포커스를 잃게 되었을 때 실행할 이벤트 함수
onkeydown : 키보드의 키를 눌렀을 때 실행할 이벤트 함수
onmousedown : 마우스 버튼을 누럴ㅆ을 때의 이벤트
onmouseup : 마우스 버튼을 땟을 때의 이벤트
onmouseenter : 마우스 커서가 해당 요소에 진입했을 때의 이벤트
onmouseleave : 마우스 커서가 해당 요소에서 빠져나갔을 때의 이벤트
onwheel : 마우스 휠이 돌아갔을 때의 이벤트
위 정보를 토대로 자바스크립트에서 HTML에 접근할 수 있다.
아래는 아주 간단한 사용 예시이다.
<body>
<span id="value">0</span>
<script>
const value = document.getElementById('value');
value.innerText = 'span 안에 값 넣기';
</script>
</body>
이를 실행하면 다음과 같다.