DOMDocument Object Model

HTML에서 다른 태그를 감싸는 태그는 부모, 감싸인 태그는 자식이 됩니다. 같은 부모를 둔 태그끼리는 형제입니다. 이 관계를 따라 태그를 이으면 맨 위에서 아래로 뻗는 트리가 되고, 이 트리를 DOM이라고 부릅니다. 트리의 한 칸 한 칸은 요소(Element)라고 합니다.

<body>
  <article>
    <h3>책 제목</h3>
    <p class="price">£51.77</p>
  </article>
</body>

브라우저와 크롤러가 DOM으로 하는 일

브라우저는 HTML을 받으면 파싱해서 DOM을 만들고, DOM을 보고 화면을 그립니다. 크롤러도 같은 방법으로 DOM을 만들지만 화면은 그리지 않습니다. 대신 DOM에서 필요한 요소를 선택자로 찾아 값을 꺼냅니다. 그래서 크롤러가 읽는 것은 우리가 보는 화면이 아니라, 그 화면을 만든 DOM입니다.

JavaScript는 DOM을 고칩니다

버튼을 누르면 글자가 바뀌거나 목록이 늘어나는 건 JavaScript가 DOM을 고쳤기 때문입니다. 아래 코드는 DOM에서 첫 번째 h3를 찾아 글자를 바꿉니다.

document.querySelector("h3").textContent = "바뀐 제목";

이렇게 바뀐 DOM은 서버가 처음 보낸 HTML과 다릅니다. 화면에는 보이는 글자가 크롤러 결과에는 없을 때, 그 글자는 대개 JavaScript가 나중에 넣은 것입니다.

아래 트리에서 요소를 눌러 부모, 자식, 형제를 확인해 보세요. 그다음 [JavaScript로 DOM 바꾸기]를 누르면 DOM과 서버가 보낸 HTML이 어떻게 달라지는지 볼 수 있습니다.

AI에게 물을 때

"화면에 버튼이 안 보여요"라는 문제도 DOM으로 나눠 물을 수 있습니다. 버튼 요소가 DOM에 아예 없는지, 있는데 숨겨져 있는지에 따라 원인이 다릅니다.

"개발자 도구 Elements 패널에서 보면 버튼 요소는 DOM에 있는데 화면에 안 보여. 이 요소를 숨기는 CSS가 어디서 오는지 찾아 줘."