🙋🏻‍♀️ 목표: 면접을 준비하기 이전에 알았던 내용들에 대한 개념을 정리해 보자.

1. DOM을 깨우치다.

---

🙌MDN 웹 문서에 따르면 돔은 웹 브라우저 제조사에서 만든 Web APIs중에서 문서객체모델이다. 무슨 말인지 모르겠다면 다음과 같이 생각해 보자.

JS 입장에서 HTML을 연결하고 받았을 때 문서는 어떤 데이터로 보일까? 바로 문자열이다. img 태그라고 알려준 것도 JS는 문자열로 보기 때문에 태그의 의미가 없던 것이다. 따라서 JS는 최소한의 어느정도 의미가 있는 단위로 쪼갯어야 했었다.

• 참조

  MDN: DOM 소개

2. DOM이란

---

JS는 태그의 관계도를 알고 싶었다. 따라서 문서 전체를 한 가문의 형태로 만들기 시작했고 정보도 세세하게 기입했으며 기입한 자료는 오브젝트 형식으로 남겼다.

그리고 이 정보 하나하나를 노드 라고 부르자고 약속하였다.

const child1 = {
    nodeType: 1.
    nodeName: 'div',
    childNode: [],
    attributes: []
}

3. Node

---

노드는 HTML문서 전반에 대한 정보를 갖고 있다.

document.querySelector 를 아는가. 우리는 childNode nextSibling 과 같은 직관적으로도 알아볼 수 있는 노드를 통해 관계를 이해하게 되었고, 결국 JS 엔진은 이들 사이를 조작할 수 있게 되었다.

4. Node를 통해

---

'DOM을 깨우치다' 라는 책을 보면 노드는 대표적으로 많이 쓰이는 두 가지가 있다.

물론 다른 것도 쓰이지만 현재 페이지에서는 두 가지만 다룬다.

// (1)Document Nodes
// -HTML문서 전반에 대한 정보를 갖고 있음
// -document.querySelector(대표적)

// (2)Element Nodes
// -node의 진짜 실용적인 부분
// -element = 태그
// -사용 가능한 기능: getAttribute(), setAttribute(), classList(), 등등...
console.log(atts.getAttribute('title')); //속성값 찾기
console.log( //있는가 & 없는가
    atts.hasAttribute('href'),
    atts.hasAttribute('title'),
    atts.hasAttribute('style'),
    atts.hasAttribute('data-foo'),
)
console.log(atts.setAttribute('style')) //속성값 지정하기

// ⭐️궁금3)classList란?
// -기능: add, remove, toogle
parent.classList.add('hello') //최신의 새롭게 생긴 방식
// ‣<div class="parent hello">
parent.setAttribute('class', 'hello') //옛날의 불편했던 방식
// ‣<div class="hello">
parent.classList.toogle('visible'); //on & off
// ⭐️궁금4)또 다른 기능
parent.innerHTML = '<div>hello</div>'
// ‣"<div>hello</div>"
parent.innerText = 'bye' //텍스트만 바꾸고 싶을 때
// ‣"bye"

4. 맥락 정리

---

돔은 웹 브라우저에서 만든 Web APIs의 문서객체모델이다. DOM에서 나오는 조작과 이벤트가 중요한데 대표적으로 document node element node event handling 이 있다. 돔은 JS를 발전시켰고 그들만의 강력한 커뮤니티가 형성되었으며 독자적으로 발전하여 이벤트 핸들링의 방식을 좀 더 쉽게 구현해 내기 위한 도구를 만들어냈다. 현재 리액트, 제이쿼리, 도 조, 모 툴즈를 탄생시킨 것이다.

4. 알면 좋은 용어✨

---

// 용어정리🔥
// (1) DOM: HTML, XML과 같은 문서를 프로그래밍 하기 위해 만들어진 문서객체모델
// (2) Parse: 문장을 문법적으로 분석하다, 프로그래밍에서 parse는 다른 언어로 작성된 문서를 디코딩 한다는 뜻
// (3) Parsing: Parse의 진행형, 문자를 의미있는 객체로 만드는 작업(HTML을 parsing해서 DOM의 형태로 만든다.)
// (4) node: 바꾸는 형태(도대체 무엇으로 바꾸는 가에 대한 정답, JS로 조작+제어하기 위해 쪼개놓은 형태)
// -종류: 무수히 많음
// 태그자체: ELEMENT_NODE = 1
// 태그안의속성: ATTRIBUTE_NODE = 2
// 텍스트정보: TEXT_NODE = 3
// 코멘트정보: COMMENT_NODE = 8
// ⇣
// -컨셉: node는 기본적으로 한 가문의 관계에 관한 것들이 많음(트리속의 관계, e.g., lastChild, nextSibling, parentNode, previousSibling, ...)
// (5) traverse: 횡단(JS에서의 뜻은 "타고타고타고 내려가서 내가 원하는 것을 찾는 것.  노드타입 = 3 이라고 알려주는 것과 그것을 찾는 것처럼 기본적으로 JS엔진에서는 traverse할 수 있는 기능을 제공함")

// 4. 자바스크립트는 컴파일 언어이자 인터프리터 언어인 이유
// -설명: JS엔진은 문서를 기계친화어로 바꾼 다음(컴파일)-> 그 결과물을 읽음(인터프리트)
// -컨셉이유: 양쪽의 장점을 모두 얻기 위함🔥