[스파르타 _ 리액트 과정] 24일차

et Ji·2022년 12월 1일

DOM 내배캠 리액트 스파르타 코딩클럽

TIL

목록 보기

29/40

📅 학습 일자 : 22. 12. 01

📜 진행 내용

[특강] DOM 기초 - 최원장 튜터님

🚩 학습 목표
- 내가 했던 것들이 DOM이었음을 깨닫기.
[강의] 자바스크립트 심화
- Chap-01. 데이터 타입
- Chap-02. 실행 컨텍스트
- Chap-03. this
🚩 학습 목표
- 개념 이론에 익숙해지기
✅ 체크 리스트
- chapter 1~2 복습

💡 배운내용

▣ DOM 기초

DOM(Document Object Model)
- DOM은 브라우저에만 내장된 API
DOM을 알기 위해, 웹페이지가 브라우저에 보이는 과정을 살펴보면서 시작해보자.
1. 브라우저(클라이언트)에서 서버에 HTML을 요청 ( URL 주소를 입력하거나, 웹 페이지의 버튼 등을 누르는 등)
2. 브라우저의 렌더링 엔진이 받아온 HTML을 파싱(parsing: 구문 분석)하여 DOM을 생성한다.
  - DOM이 담당하는 두 가지 기능
    1. HTML 문서에 대한 모델 구성
      - HTML을 한 줄씩 읽으면서 문서의 모든 것을 (심지어 그것이 주석이더라도) 자바스크립트가 HTML에 접근할 수 있는 노드(오브젝트)로 만든다.
      - 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree 라 한다.
        
        태그 → 노드 → 트리 구조 형성
    2. HTML 문서 내의 각 요소에 접근 / 수정
      - DOM의 모든 노드는 노드 간 이동, 수정 등을 가능하게 해주는 메서드와 속성(property)을 가지고 있다.
      
      ※ HTML 태그의 속성은 attribute라고 함.
      
      ※ method는 호출의 주체가 있다. 예) person.getAge( )
      함수는 혼자서 실행된다. 예) getAge( )
  - DOM 탐색과 접근
    - 노드 트리의 가장 상위에는 단 하나의 root node를 가진다.
    - 루트 노드를 제외한 모든 노드는 단 하나의 parent node를 가진다.
    - 부모 노드(parent node) 하위에는 자식 노드(childe node)가 위치하며, 자식 노드는 여러 개가 될 수 있기 때문에 접근하기 위해서는 인덱스 번호를 붙여준다.

🔎 node vs element

자바스크립트의 DOM을 다루다보면 자주 접할 수 있는 node와 element의 차이점은 ?
DOM 문서는 node의 계층적인 구조로 이루어진다. 이 때 node는 요소(element), 텍스트, 주석 등등을 다 포함하고 있으며 element는 node의 유형 중 하나인 것이다.
주로, < p >, < div > 같은 태그를 사용해서 작성된 노드를 말한다.

우리가 자바스크립트에서 DOM을 탐색하고 조작할 때는, node의 다른 형태인 주석이나 텍스트보다 주로 element를 조작하는 경우가 많다.

DOM을 조작하는 방법에는 node를 탐색하는 방법과 element를 탐색하는 방법이 있는데
element를 탐색하는 방법을 사용하면 주석이나 텍스트 등을 제외한 element만을 탐색할 수 있기 때문에 DOM을 조작할 때는 주로 element를 탐색하는 방법을 많이 사용한다.

- node를 탐색하는 방법 : parentNode , nextSibling, childNodes …
- element를 탐색하는 방법 : getElementsByTagName, getElementsByClassName, getElementById , querySelector …