본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

왜 'aaa' 가 남아 있을까요

중요도: 1

아래 예시에서는 table.remove() 가 호출되었으니 문서에서 표를 삭제해야만 합니다.

그러나 이 코드를 실행해보면, 텍스트 'aaa' 가 여전히 나타나는 것을 확인할 수 있습니다.

왜 이런 일이 일어나는 걸까요?

<table id="table">
  aaa
  <tr>
    <td>Test</td>
  </tr>
</table>

<script>
  alert(table); // table 은 삭제할 표의 id 입니다.

  table.remove();
  // 왜 문서 안에 aaa가 남아 있을까요?
</script>

이 이상한 동작의 이유는 바로 주어진 HTML이 잘못되었기 때문입니다.

브라우저는 이를 자동으로 고쳐야 합니다. 그러나 명세에 따르면 <table> 안에는 표와 관련된 특정 태그만이 존재할 수 있기 때문에 텍스트가 있어서는 안 됩니다. 따라서 브라우저는 'aaa'를 <table> 앞에 추가합니다.

이제 표를 삭제해도 텍스트가 남아있는 이유가 분명해졌습니다.

이 문제는 브라우저 도구를 사용해 DOM을 탐색해보면 쉽게 답을 찾을 수 있습니다. 브라우저 도구에서는 <table> 앞에 'aaa' 가 있는 것으로 표시됩니다.

HTML 표준에는 잘못된 HTML을 수정하는 방법이 구체적으로 정해져 있으므로, 이러한 브라우저의 동작은 올바른 동작입니다.