배경지식

• javascript의 탄생 배경: html 문서를 조작하기 위해서 만들어진 용어
• javascript가 html 문서를 조작하는 방식: 브라우저에서 웹문서를 해석할 수 있는 렌더링 엔진이 html를 한줄한줄 해석(파싱)하고 전체 문서를 객체화하여 javascript로 접근할 수 있도록 한다. javascript는 각각의 노드(DOM Tree의 요소)에 접근하여 이를 제어한다.

DOM이란?

DOM은 문서 객체 모델(Document Object Model)의 약자

• 스크립트 언어로 html 요소를 제어할 수 있도록 웹문서를 객체화 한 것을 말함.
• 다르게 말하면, 브라우저에서 javascript에게 html 문서를 조작할 수 있도록 주는 API임.

DOM Tree? 노드?

DOM은 Tree 구조를 가지고 이를 DOM Tree라고 말한다.

• 각각의 요소는 노드라고 한다.

BOM이란?

BOM은 Browser Object Model로 브라우저를 객체화해서 조작할 수 있도록 만든 모델임

그렇다면, JS가 노드에 어떻게 접근하나?

BOM이 웹문서 영역을 제공할 수 있도록 주는 객체가 document 객체. document 객체는 웹페이지 자체를 의미하며 DOM Tree의 최상위 노드이다. 최상위 노드부터 하위 노드에 접근한

Ex.

document.getRootNode() // document
document.childNodes[1].childNodes[2].childNodes[1].textContent= '제목입니다'

하지만 이렇게 찾으면 직관적이지 않으니, 아래와 같은 방법을 사용

let domObject = document.querySelctor('h1')

domObjext.textContent = "변경합니다"