DOM 이란?

Document Object Model 의 약어로 웹 문서를 제어하기 위해서 웹 문서를 객체화한 것을 말합니다. 이전 시간에 배웠듯이 객체는 값을 나타내는 프로퍼티와 어떠한 수행을 하는 메서드를 갖고 있습니다.

이렇게 웹 문서(HTML)를 객체화 함으로써 우리는 객체로 웹 문서를 제어할 수 있습니다.

웹 문서 Body에 "Hello World1" 텍스트 삽입

document.querySelector('body').innerHTML = 'Hello World!';
document.body.innerHTML = 'Hello World!';

웹 문서에서 H1 태그 가져와서 삭제하기

const $h1 = document.querySelector('h1');
$h1.remove();

DOM 요소 조작하기

• DOM 요소 조회
  • getElementById()
  • getElementsByTagName()
  • querySelector()
  • querySelectorAll()
• DOM 요소 조작
  • dom.textContent = 'Hello World!';
  • dom.innerHTML = 'Hello World!';

HTMLElement, HTMLCollection, Node, NodeList

웹 문서를 제어하기 위해서는 제어하고 싶은 DOM 객체를 가져온 후 객체의 프로퍼티나 메서드를 통하여 제어할 수 있습니다.

하지만 우리가 이러한 객체로 프로퍼티나 메서드로 원하는 작업을 수행하기 위해서는 이 객체가 어떠한 객체인지 이해해야할 필요가 있습니다.

• HTMLElement HTMLCollection

  get메서드를 통해서 조회한 객체유형입니다.