DOM 이란?

지나친 이론 공부를 다시 해보겠다...

 

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.

https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV

프론트엔드 날개달기

 

---

 

돔(DOM)이란 무엇인가?

자바스크립트의 탄생 배경

• 자바스크립트는 웹문서를 제어하기 위해 개발된 언어이다.
• HTML 요소를 추가, 제거, 변경하는 등의 작업을 위해 사용된다.

HTML 파일을 자바스크립트로 제어하는 방법

• 브라우저에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다.
  • ex) 크롬 : 블링크, 파이어폭스: 게코, 사파리 : 웹킷 등
• 렌더링 엔진이 HTML 문서를 해석한 후 객체화하여 자바스크립트로 접근할 수 있도록 한다.
• 이 객체화된 문서를 문서 객체 모델(Document Object Model, DOM)이라고 한다.

돔(DOM) 구조

• DOM은 트리 구조를 가지며, HTML 문서의 각 요소를 노드(Node)라고 한다.
• HTML 요소는 부모 태그와 여러 자식 태그를 가질 수 있다.

돔 트리

• HTML 문서의 구조는 트리 형태로 된다.
• 트리의 최상위 노드는 document 객체이다.
  • document는 웹페이지 자체를 의미한다.
  • 각 노드들에 접근하기 위한 진입점!

돔 요소 접근 및 제어

1. 접근: 각 노드에 접근하기 위해 document 객체를 사용한다.
   • 예: document.childNodes는 최상위 노드를 반환한다.
2. 제어: 접근한 노드를 통해 HTML 요소를 변경할 수 있다.
   • 예: document.querySelector('h1').textContent = 'New Title';을 통해 제목을 변경할 수 있다.

브라우저 오브젝트 모델(BOM)

• BOM은 브라우저를 제어할 수 있도록 모델링한 것을 말한다.
• CSSOM은 CSS를 자바스크립트로 조작할 수 있도록 한 것이다.

돔의 사용 예시

1. document 객체를 통해 노드 접근:

let htmlNode = document.childNodes[0];
let bodyNode = htmlNode.childNodes[1];
let h1Node = bodyNode.childNodes[0];
h1Node.textContent = 'New Title';

   

    2. querySelector를 사용한 간편한 접근

document.querySelector('h1').textContent = 'New Title';

돔 API

• 돔은 자바스크립트 언어 자체가 아니라 브라우저에서 제공하는 API다.
• HTML 요소를 제어할 수 있는 다양한 프로퍼티와 메소드가 있다.

정리 및 결론

• 돔은 웹 문서를 객체화하여 자바스크립트로 제어할 수 있도록 하는 모델이다.
• 이를 통해 HTML 요소를 동적으로 조작할 수 있다.

 

 

 

아 근데 노션 티스토리로 옮기는거 진짜 에바다 ㅜㅜㅜㅜ