DOM이란?

DOM이란 Document Object Model의 약자로서, 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체(Object)모델이다.

JavaScript는 이 model로 웹 페이지에 접근하고, 페이지를 수정할 수 있다. 즉, DOM은 HTML인 웹 페이지와 스크립팅 언어인 JavaScript를 연결하는 역할을 수행한다.

그럼 구체적으로 어떻게 JavaScript는 HTML에 접근할 수 있을까?

바로 document 객체를 이용해서다.
JavaScript의 document 객체는 DOM 구조를 접근하는 관문이며, document 객체는 HTML 문서를 나타낸다고 할 수 있다.

HTML에 접근해야 하는 이유

대량의 정보를 직접 HTML에 코드를 작성하는 것 말고, 서버에서 API 호출을 통해 HTML에 보여져야하는 목록을 가져와서 JavaScript를 통해 동적으로 요소를 생성하는 작업을 할 수 있기 때문이다.

DOM으로 HTML에 접근하는 예시

document 객체는 DOM 트리의 최상위 노드(root node)에 접근하게 해준다. document 객체로 요소(element)에 접근하듯이 요소의 속성(attribute)에도 접근할 수 있다. 그렇게 document 객체를 통해 class, id도 추가하고 스타일링도 가능하다.

요소(element)의 내용은 innerHTML로 접근하고 수정할 수 있다. 다음은 document 객체를 이용하여 body태그의 내용을 바꾸는 예시이다.

document.body.innerHTML = '내 이름은 엘레나야';

만약 특정 요소에 접근하고 싶다면 tag, class, id와 같은 css 선택자로 접근이 가능하다.

const pinkElement = document.querySelector('.pink');
pinkElement.style.backgroundColor = 'pink';

위의 예시를 설명하면,

• 먼저 document객체를 통해 HTML 파일에서 class명이 pink인 요소를 가져와 pinkElement라는 변수에 담았다.
• 이후 pinkElement.style.backgroundColor를 통해 해당 요소의 배경색을 pink로 변경하였다.

여기서 스타일링 시 css에서 작성하던 것과는 다르게 background-color가 아닌 backgroundColor와 같은 camelCase 형식으로 작성한 것을 볼 수가 있는데,

이처럼 JavaScript에서 css style을 수정할 경우 하이픈(-)은 사용할 수 없고 camelCase를 이용하여 코드를 작성해야 한다.

JavaScript를 이용하여 HTML 웹 페이지에 동적으로 요소를 생성할 수도 있다.

const pTag = document.createElement('p');
body.appendChild(pTag);

위의 예시를 설명하면,

• 먼저 document객체를 통해 p태그를 생성하고 pTag라는 변수에 담았다.
• 이후 appendChild를 통해 body 내부의 제일 아래쪽에 해당 요소를 추가하였다.