DOM

(1) DOM의 기본 개념

1. javascript가 왜 생겼는데?

   1. 브라우저에서 쓰려고 만들어진 JS

      

      출처 : https://roseline.oopy.io/dev/javascript-back-to-the-basic/history-of-javascript

   2. 본연의 역할 : 웹 페이지를 동적으로 만들기 위해! 즉, HTML문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어

2. 웹 페이지가 뜨는 과정

   1. 사용자가 브라우저에 ‘**www.naver.com’ 주소를 입력

      💡 **사용자 = 브라우저 = 클라이언트, 같은 의미로 생각
      1. 클라이언트가 서버에게 ‘요청(request)’
      2. 크롬을 통해 클라이언트의 역할을 하는 것

   2. HTML 문서를 서버로부터 수신

      1. 네이버서버는 여러분(=브라우저 =클라이언트)에게 ‘ 응답(response)
      2. 그 응답은 HTML 문서(document)

   3. 브라우저가 HTML 파일을 해석(parsing 파싱)

      1. 브라우저에는 기본적으로 렌더링 엔진이 있음. 어떤 것을 렌더링 한다는 것일까요? 서버가 클라이언트(여러분)에게 준 HTML문서를 렌더링 한다는 것

2. 랜더링 엔진이 HTML문서에 코드 한줄, 한줄 보면서 ‘해석'해요. 그리고 d로 가는거죠

       💡 **해석은 언제 필요할까?**
       어떠한 것을 이해하지 못할 때, 우리는 해석을 해야 함. 마찬가지로 서버로부터 받아 온 그 문서를 javascript는 이해할 수 없기 때문에 javascript가 알아들을 수 있는 방법으로 ‘해석’하는 과정이 필요.
       

   4. javascript가 알아들을 수 있는 방식으로 해석한 내용을 토대로 DOM Tree를 구성 다음 이미지 처럼

      

      출처 : 짐코딩의 CODING GYM

   5. DOM Tree랑 CSSOM Tree를 묶어서 Render Tree를 구성

      렌더 트리(Render Tree)는 HTML, CSS 및 JavaScript 문서를 파싱하여 브라우저에서 실제로 렌더링되는 최종 문서 모델을 나타내는 객체의 계층 구조

      결국은, 브라우저 화면에 그리기 위한 최종 버전을 만들어낸다는 것 그리고 나서 브라우저에 그림을 그리기 위한 레이아웃 계산 → 페인팅 과정이 시작

3. 그래서 DOM이 뭐라고?

   1. Document(HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것이(2-c과정의 결과물)

   2. 브라우저에 기본적으로 내장되어 있는 API 중 하나

      💡 **API가 뭘까?**

      API는 무언가를 주문할 때 메뉴판과 같은 것이라고 생각해볼 수 있음. 예를 들어, 카페에서 커피를 주문할 때, 메뉴판을 통해 주문하게 됨. 메뉴판은 고객과 카페 사이의 인터페이스 역할을 하며, 고객은 메뉴판에서 주문할 음료나 음식을 선택하고, 카페는 해당 요청을 처리하여 음료나 음식을 제공합니다.

      API도 비슷한 개념입니다. 다른 시스템에서 데이터나 서비스를 요청할 때, API는 해당 시스템과 사용자 간의 인터페이스 역할을 함. 예를 들어, 날씨 앱에서 사용자가 현재 위치의 날씨를 확인하려면, 앱은 해당 기능을 제공하는 날씨 서비스의 API를 호출하여 날씨 정보를 받아옴

      따라서, API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 함 브라우저의 경우 역시, 기본적으로 DOM과 관련된 API를 제공함으로써 브라우저의 DOM 객체에 접근할 수 있도록 도와줌

      1. document를 다음 두 환경에서 입력

         1. chrome browser 개발자 도구
         2. VSCode

      2. 런타임(런타임 환경)

         

         출처 : https://beomy.github.io/tech/javascript/javascript-runtime/

   3. DOM이 브라우저에 내장되어있기 때문에 우리는 HTML의 내용을 javascript로

      1. 접근할 수 있음
      2. 제어할 수 있음

   4. 모든 DOM의 node들은 ‘속성’과 ‘메서드'를 갖고있음

      💡 **DOM의 node?**

      DOM에서 Node란 웹 페이지를 구성하는 모든 HTML 태그와 텍스트, 그리고 속성 등을 하나의 블록으로 취급하는 것이라고 생각할 수 있음 이러한 블록들은 서로 계층 구조로 연결되어 있으며, 각 블록은 자식 노드, 부모 노드, 형제 노드와 관계를 가지고 있음 이러한 관계를 이용하여 DOM 트리를 탐색하고 조작할 수 있음

      아래 DOM 요소 하나 하나를(네모, 동그라미) 노드라고 할 수 있음

      

      

      DOM의 Node 객체에서 속성과 메서드를 구분하는 가장 쉬운 방법은 **Node 객체의 속성은 값**을 가지고 있는 반면, **메서드는 동작을 수행**한다는 것

      즉, Node 객체의 속성은 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는 데 사용되며, 메서드는 해당 객체가 수행하는 작업을 나타내는 함수

      예를 들어, Node 객체의 nodeName 속성은 해당 노드의 이름을 나타내는 문자열 값을 반환합니다. 반면에 appendChild() 메서드는 해당 노드의 자식 노드를 추가하는 메서드이며, DOM 트리에서 해당 노드의 위치를 변경하는 동작을 수행.

      // 아래 코드에서 속성과 메서드를 구분해보자
      document.getElementById("demo").innerHTML = "Hello World!";

   5. 참고(함수와 메서드의 차이)

      

      출처 : 네이버 사전

      // example1(메서드의 예)
      person.getName();
      
      // example2(함수의 예)
      testLogging();

(2) DOM에 접근 및 제어해보기

1. 항상 돔트리의 최상단 노드는 document

   // 무슨 결과가 나올까요?
   document.getRootNode();

2. childNodes, parentNode를 이용해 기어다녀보기 :)

   DOM은 모두 노드로 이루어져 있기 때문에 부모노드 - 자식노드관계로 이루어져 있음 왔다갔다 해 보는 연습을 통해서 익숙해 질 수 있음

3. document 관련 api

   1. Finding

      /** 찾아보자 */
      
      // 해당 id명을 가진 요소 하나를 반환
      document.getElementById("id명")
      
      // 해당 선택자를 만족하는 요소 하나를 반환
      document.querySelector("선택자")
      
      // 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환
      document.getElementsByClassName("class명")[인덱스]
      
      // 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환
      document.getElementsByTagName("태그명")[인덱스]
      
      // 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환
      document.querySelectorAll("선택자명")[인덱스]
      
      // 새로운 노드를 생성
      const div = document.createElement('div');
      document.body.append(div);
      document.body.append(div);

   2. changing

      /** property(=속성)을 바로 바꿔버려잇! */
      
      // 이 둘은 차이가 있음
      element.innerHTML = new html content
      element.innerText = new text
      
      // style을 바꿈
      element.style.property = new style
      
      //method를 통해 클래스를 추가
      element.setAttribute(attribute, value)
      
      // 어랏? 그럼 이런것도 가능??
      element.setAttribute("style", "background-color:red;");
      
      // ....
      element.style.backgroundColor = "red";
      
      // input 필드의 변신

4. 몇 가지만 더 해볼까요?

   // createElements
   const para = document.createElement("p");
   para.innerText = "This is a paragraph";
   document.body.appendChild(para);
   
   // createTextNode(elements는 아니구, 그냥 글자...)
   let textNode = document.createTextNode("Hello World");
   document.body.appendChild(textNode);
   
   // write. 조심 또 조심!
   document.write("Hello World!");
   
   document.write("<h2>Hello World!</h2><p>Have a nice day!</p>");
   
   // 골로 가는 코드
   function myFunction() {
     document.write("Hello World!");
   }
   
   // version 01
   element.addEventListener("click", myFunction);
   function myFunction() {
     document.getElementById("demo").innerHTML = "Hello World";
   }
   
   // version 02
   element.addEventListener("click", function() {
     document.getElementById("demo").innerHTML = "Hello World";
   });