(1) DOM의 기본 개념

1. JS가 왜 탄생했을까?

1. 브라우저에서 쓰려고 만들어진 언어이다.

   Netscape와 Sun Microsystems가 Javscript 발표

   1995년 넷스케이프는 동적인 웹 페이지를 만들기 위해서 브라우저에서 동작하는 가벼운 프로그래밍 언어를 만들기로 한다. 넷스케이프의 브랜든 아이크 (Brendan Eich)가 스크립트 언어를 만들기 시작해 열흘만에 개발되었다.

   1996년 3월, 넷스케이프 네비게이터 2에 등장했고 당시에는 그 언어의 첫번째 버전을 Mocha라고 불렀다. 후에는 LiveScript로 바뀌었다가 결국에는 현재의 Javascript가 되었다.

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

2. 웹페이지 렌더링 과정

1. 사용자가 브라우저에 www.naver.com 주소를 입력한다.

   <aside> 💡 사용자 = 브라우저 = 클라이언트, 같은 의미로 생각하면 된다.

   </aside>

   1. 클라이언트가 서버에게 요청(request)를 한다.
   2. 사용자가 브라우저 (크롬 등) 을 통해 클랑이언트의 역할을 하는 것이다.

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

   1. 네이버 서버에서 클라이언트에게 응답(response)를 준다.
   2. 응답은 HTML문서 (document)이다.

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

   1. 브라우저에는 기본적으로 렌더링 엔진이 있다. 서버가 클라이언트에게 준 HTML문서를 렌더링한다는 것이다.
   2. 렌더링 엔진이 HTML문서에 코드를 한줄 한줄 보면서 해석한다.

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

   

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

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

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

<aside> 💡 브라우저 렌더링 과정 정리

클라이언트 요청 → 서버에서 응답 → HTML Document 렌더링 엔진이 해석 → HTML과 CSS를 파싱해서 Tree 생성 (Parsing) → 두 Tree를 결합해서 Render Tree 생성 → 각 노드의 위치와 크기 계산 (Layout) → 계산된 값으로 실제 픽셀로 변환하여 레이어 생성 (Paint) → 레이어 합성하여 실제 화면에 나타낸다. (Composite)

</aside>

3. DOM이란?

<aside> 💡 Document Object Modeling

Document(HTML문서) 를 Javascript가 이해할 수 있는 Object 형태로 Modeling을 한 것.

</aside>

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

  API?

  Application Programming Interface의 약자로 프로그램 간 상호 작용을 위한 인터페이스이다. 소프트웨어 컴포넌트들이 서로 통신하고 상호작용할 수 있도록 하는 규약이나 인터페이스를 말한다.

• DOM이 브라우저에 내장되어있기 때문에 HTML 문서를 Javascript로 접근 및 제어할 수 있다.

• 모든 DOM의 node들은 속성과 메서드를 갖고 있다.

  <aside> 💡

  DOM에서 Node

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

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

  

  </aside>

  <aside> 💡 DOM 요소의 속성과 메서드를 구분하는 방법

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

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

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

  </aside>

(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);
      

   b. 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 필드의 변신
   

   // 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";
   });