DOM

TypeScript 적용하는 작은 프로젝트를 만드려다보니 항상 React만 사용해와서 강의를 듣는데 DOM 개념이 나오면 멘붕이 왔다.. 그런 내 맘을 알았는지 DOM 관련 영상을 올려주신 강사님 덕분에 정리를 해본댜..

DOM

• Document Object Model의 약자

HTML- 웹페이지의 구조를 만드는 마크업 언어
JavaScript- HTML로 만들어진 구조에 기능을 더할수 있는 프로그래밍 언어
DOM- HTML 요소를 Object처럼 조작할 수 있는 모델
DOM은 document객체를 통해 HTML에 접근
BOM(Browser Object Model)이 window 객체를 통해 브라우저에 접근 (window객체가 document객체보다 상위 개념)

브라우저가 이런 HTML Tag들을 다 읽을 수 있지도, 이해하지도 않는다!!

각각의 HTML Tag들을 브라우저만의 JavaScript Object로 변환해서 메모리에 기억하고 있는거임!!!

HTML           →   Tag

JavaScript     Node

---

이렇게 각각 작성한 HTML tag들이 그에 맞는 요소들로 만들어집니다.

이때 동적 element를 이용하고 싶다면, 따로 component에서 생성해서 적용도 가능!

html을 이용해? → document에서 하던지,

body를 이용해? → body에서 하던지, 

그 밑에 section, span 등등을 이용해? → 원하는 요소에 querySelector을 이용하면 해당하는 요소 안에 있는 자식 요소들 중에 특정한 id,class,tag들을 가지고 올 수 있습니다.

⭐️ 중요 포인트!! 모든 Tag 요소들은 HTMLElement를 상속하고, 이것은 결국 Element이다!!

---

element VS node

• element는 화면상 보이는 것들 (div,input,button 등)만 들어있는 반면,
• 노드는 엘리먼트의 내용들과 html상의 text도 포함되어 있다.