DOM Basic

 // HTML DOM 관련

        // 1. getElementById ★★★
        // document.getElementById("box1").innerText 

            = "이러면 box1이 body에있으니까 box1에 해당하는 값이 없어서 null exception.";
        // --> 그래서 리스너가 필요하다@!

        // 1-1. addEventListener ★★★
        // --> 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정
        // eventTarget.addEventListener('eventType', function / functionName [, useCapture])
        // 대상객체.addEventListener(이벤트명, 실행할이벤트리스너, 이벤트전파방식)

        // 1. 이벤트 명 : 이벤트 리스너를 등록할 이벤트 타입을 문자열로 전달합니다.
        // 2. 실행할 이벤트 리스너 : 지정된 이벤트가 발생했을 때 실행할 이벤트 리스너를 전달합니다.
        // 3. 이벤트 전파 방식 : false면 버블링(bubbling) 방식으로, true면 캡처링(capturing) 방식으로 이벤트를 전파합니다.

        window.addEventListener("DOMContentLoaded", () => {
            document.getElementById("box1").innerText = "이렇게 글자를 바꿀 수 있따";
        });
        // ---> 자바의 public static void main과 같은 개념으로 대충 생각.

---

    <!-- on관련 API -->
    <!-- onclick, onmouseenter, onmouseleave... -->

    <div id="box1"
        onclick="clickHandler()"
        onmouseenter="console.log('마우스 오버')"
        onmouseleave="console.log('마우스 리브')"
    >
        클릭핸들러
    </div>

 

    <!-- inputType관련 -->
    <!-- onfocus, onblur... -->

    <input type="text" placeholder="inputType관련" 
        onfocus="console.log('포커스 상태 : 검색창에 손을대면 자동완성을 켜지게')"
        onblur="console.log('포커스 해제 : 검색창에서 손을떼면 꺼지게')"     
    >

<!-- 혼자 정리 -->
    1. head에서 document.getElementById("box1").innerText = ... -> 이걸 실행시키고 싶어
    2. 하지만 box1은 body에 있으므로, 코드가 head부터 시행되면 box1이 없으니까 null로 반환되겠찌?
    3. 그럴때 addEventListener가 필요해. -> 자바의 public static void main과 같은 개념으로 대충 생각하면되고,
    4. head의 리스너가 box1을 실행시켰고, 그와 동시에 box1의 클릭핸들러라는 글자가 innerText의 내용으로 변하게 됨
    5. 그리고 on관련 API가 전부 시행되고, 이것저것 할 수 있찌
    6. input은 그 다음에 열리겠지만 어쨌든 순식간이니까 한번에 켜지지?