Table에 과연 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을 수정하는 방법이 구체적으로 정해져 있으므로, 이러한 브라우저의 동작은 올바른 동작이다.

tr에는 text node의 삽입을 스펙에서 제한하고 있다. 기본적으로 tr태그 안에 들어간 text는 상위로 방출되는 case이다.