Front-End/JavaScript

JavaScript DOM, Window

코드깎는머슴 2024. 2. 23. 18:03
728x90
반응형

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>

이를 실행하면 다음과 같다.

 

728x90
반응형