[브라우저와 자바스크립트] 02. DOM

DOM이란 Document Object Model의 약자로 한국어로는 문서 객체 모델입니다.

웹 브라우저 안에 나타나는 콘텐츠 부분을 웹 페이지라고도 부르지만 다르게는 웹 문서라고도 표현하는데요.

그래서 DOM을 간단하게 요약하면 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것이라고 생각하면 됩니다.

그리고 이미 사용해봤던 document 객체가 이 웹 문서의 최상단 객체로 진입점의 역할을 하는데요.

 

그래서 이 document 객체를 활용하면 웹 페이지의 내부에 무엇이든 수정할 수 있고 새로운 콘텐츠를 만들어 낼 수도 있습니다. 콘솔에 document 객체를 출력하면 윈도우 객체와는 다르게 HTML 태그가 출력이 되는데 typeof 연산자로 자료형을 확인해보면 object가 출력되지만 DOM의 경우에는 이렇게 직접적으로 접근하게 되면 객체가 아니라 DOM에 해당하는 HTML이 출력됩니다.

// DOM (Document Object Model)
console.log(document);
console.log(typeof document);
console.dir(document);

DOM을 태그가 아니라 객체로 보고 싶다면 console.log가 아니라 콘솔 객체의 dir 메소드를 활용하면 됩니다.

저장하고 실행해보면  console.log에서는 태그 형태가 출력되고 dir 메소드는 객체 형태로 다양한 프로퍼티들이 출력되는 모습을 확인할 수 있습니다. 

DOM 개념에 따르면 문서 내의 모든 태그들은 다 각각의 객체라는 말인데요.

// DOM (Document Object Model)
const title = document.querySelector('#title');

일단 이 코드들은 지우고 이전에 배웠던 querySelector를 활용해서 title이라는 id를 가진 태그를 변수에 한번 담아봤는데요.

HTML을 보면 title이라는 id를 가진 태그는 h1 태그입니다.

저장하고 새로 고침을 해보면 콘솔 창에서도 이 title 변수를 바로 사용할 수 있는데요.

그러면 title id를 가진 h1 태그가 출력되는 걸 확인할 수 있습니다. 그런데 title에 점을 한번 찍어주면 많은 프로퍼티들이 존재하는 걸 확인할 수가 있습니다. 이 중에서 style이라는 프로퍼티에 접근하고 

그 중에 color라는 프로퍼티 값을 red로 한번 할당해주면 h1 태그의 글자색이 빨갛게 변한 걸 확인할 수 있습니다.