HTML 테이블의 DOM 표현

Question

테이블 용 DOM을 통과하는 코드를 작성하고 있는데 놀랍습니다. DOM (FF에서, 적어도)은 내가 기대했던 것이 아니다. FF는 tbody과 "\ n"을 포함하는 다양한 텍스트 노드를 삽입했습니다. 소스 HTML은 다음과 같습니다

<table> 
<tr> 
<th></th><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th><th>Jul</th><th>Aug</th><th>Sep</th><th>Oct</th><th>Nov</th><th>Dec</th> 
</tr> 
<tr><th>2010</th> 
<td id='tdid0'>53</td> <td id='tdid1'>249</td> <td id='tdid2'>1689</td> <td id='tdid3'>22753</td> 
<td id='tdid4'>23051</td><td id='tdid5'>23633</td><td id='tdid6'>23923</td> <td id='tdid7'>23306</td> 
<td id='tdid8'>23943</td><td id='tdid9'>24196</td><td id='tdid10'>24440</td><td id='tdid11'>24156</td> 
</tr> 
<tr><th>2011</th> 
<td id='tdid12'>24262</td><td id='tdid13'>22554</td><td id='tdid14'>25507</td><td id='tdid15'>23144</td> 
<td id='tdid16'>24354</td><td id='tdid17'>24610</td><td id='tdid18'>24870</td><td id='tdid19'>24424</td> 
<td id='tdid20'>24698</td><td id='tdid21'>22640</td><td></td><td></td></tr> 
</table> 

1 - FF는 table의 첫 번째 자식으로 tbody 삽입했다, 그래서 나는 2

의 table하지 찾을 수의 (a td)에서 최대 3 레벨을 가야

2 - Firebug의 html보기는 3 행을 예상대로 표시합니다. 행 2와 행 3은 th이고 그 뒤에 12 td이옵니다. 그러나 단일 단계를 거치면 tbody에는 6 개의 자식이 있고 각 행 다음에 NL 텍스트 노드가 있습니다.

3 - Firebug는 각 행에 예상대로 13 개의 자식이 있다고 주장합니다 (헤더와 12 개의 데이터 항목). nextSibling으로 아이들을 밟을 때, 예상 된 th과 td 요소는 실제로 WS를 포함하는 텍스트 노드로 구분됩니다. 무슨 일이 벌어지고 있는지 알 겠어? 브라우저가 기본적으로 원하는대로 할 수 있습니까? 감사.

Answer 1

FF는 TR 요소 테이블 엘리먼트의 자식이 없을 수도 HTML 4에서 TBODY

삽입했다. 사이에 tbody, thead 또는 tfoot 요소가 필요합니다. tbody 요소의 시작 및 끝 태그는 선택 사항입니다. Firefox가 제대로 삽입하고 있습니다.

는

가 예상 밝혀 당신은 당신의 마크 업이 공백이

각 행에 후 NL 텍스트 노드와의 TBODY 6 아이가 밝혀 th 및 td 요소는 실제로 텍스트 노드로 분리되어 있습니다.

Ditto