HTML専用のDOM（テーブルを作る）
DOMスクリプティングだけでテーブルを作る事ができる。
<table id="nametbl" border="1">
<tr>
<td class="theadercell">性</td>
<td class="theadercell">名</td>
</tr>
<tr>
<td>山田</td>
<td>太郎</td>
</tr>
<tr>
<td>佐藤</td>
<td>花子</td>
</tr>
</table>
以下のテーブルをDOMスクリプティングで作成すると
<script>
// tableタグ要素を作成
var table = document.createElement('TABLE');
table.id = 'nametbl';
table.border = '1';
// TBODYタグ要素作成し、TABLEタグ要素に追加
var tbody = document.createElement('TBODY');
table.appendChild(tbody);
// 1行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr1 = document.createElement('TR');
var td1_1 = document.createElement('TD');
td1_1.appendChild(document.createTextNode('性'));
var td1_2 = document.createElement('TD');
td1_2.appendChild(document.createTextNode('名'));
td1_1.className = 'theadercell';
td1_2.className = 'theadercell';
tr1.appendChild(td1_1);
tr1.appendChild(td1_2);
tbody.appendChild(tr1);
// 2行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr2 = document.createElement('TR');
var td2_1 = document.createElement('TD');
td2_1.appendChild(document.createTextNode('山田'));
var td2_2 = document.createElement('TD');
td2_2.appendChild(document.createTextNode('太郎'));
tr2.appendChild(td2_1);
tr2.appendChild(td2_2);
tbody.appendChild(tr2);
// 3行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr3 = document.createElement('TR');
var td3_1 = document.createElement('TD');
td3_1.appendChild(document.createTextNode('佐藤'));
var td3_2 = document.createElement('TD');
td3_2.appendChild(document.createTextNode('花子'));
tr3.appendChild(td3_1);
tr3.appendChild(td3_2);
tbody.appendChild(tr3);
// tableタグ要素をBODYタグに追加
document.body.appendChild(table);
</script>
以上のようなものになる。
createElementメソッドとappendChildメソッドを使って、テーブルを作ることができる。
DOMスクリプティングでテーブルを作る際に、TBODYを考慮することを忘れてはいけない。TBODYタグを追加しないとIEでは何も表示されない（※要確認）
DOMでは、テーブル関連要素のために、様々なプロパティとメソッドが規定されている。
メソッドとしては以下のものがある。
▼TABLEタグ要素（HTML TABLEElementインタフェース）のメソッド
| メソッド |
|---|
|
createCaption() CAPTIONタグ要素を新たに生成し、HTMLElementインタフェース型オブジェクトを返す。もしすでにCAPTIONタグ要素が存在していれば、そのオブジェクトを返す。このメソッドに引数はない |
|
createTFoot() TFOOTタグ要素を新たにに生成し、HTMLElementインタフェース型オブジェクトを返す。もしすでにTFOOTタグ要素が存在していれば、そのオブジェクトを返す。このメソッドに引数はない |
|
createTHead() THEADタグ要素を新たにに生成し、HTMLElementインタフェース型オブジェクトを返す。もしすでにTHEADタグ要素が存在していれば、そのオブジェクトを返す。このメソッドに引数はない。 |
|
deleteCaption() CAPTIONタグ要素が存在していれば、それを削除する。引数・戻り値はない。 |
|
deleteRow(index) テーブル内の行（TRタグ要素）を削除する。引数indexはTRタグ要素のインデックス番号。インデックス番号は０から割振られる。もし引数indexに-1を与えた場合は、テーブル内の最後の行を削除する。このメソッドに戻り値はない。 |
|
deleteTFoot() TFOOTタグ要素が存在していれば、それを削除する。引数・戻り値はない。 |
|
deleteTHead() THEADタグ要素が存在していれば、それを削除する。引数・戻り値はない。 |
|
insertRow(index) 空の行（TRタグ要素）を新たに生成し、TABLEタグ要素に挿入する。引数indexには、挿入したい場所を表すインデックス番号を指定する。インデックスは０から割振られる。もしindexに−１を与えると、最後の行として追加される。 |
▼THEAD/TFOOT/TBODYタグ要素（HTML TABLESectionElementインタフェース）のメソッド
| メソッド |
|---|
|
deleteRow(index) TBODYタグ要素内の行（TRタグ要素）を削除する。引数indexはTRタグ要素のインデックス番号。インデックス番号は０から割振られる。もし引数indexに-1を与えた場合は、TBODYタグ要素内の最後の行を削除する。このメソッドに戻り値はない。 |
|
insertRow(index) 空の行（TRタグ要素）を新たに生成し、TBODYタグ要素に挿入する。引数indexには、挿入したい場所を表すインデックス番号を指定する。インデックスは０から割振られる。もしindexに−１を与えると、最後の行として追加される。 |
▼TRタグ要素（HTML TABLERowElementインタフェース）のメソッド
| メソッド |
|---|
|
deleteCell(index) 行内のセル（TD・THタグ要素）を削除する。引数indexはセルのインデクス番号。インデックス番号は０から割り降られる。もしindexに−１を与えた場合は、TRタグ要素ないの最後のセルを削除する。メソッドに戻り値はない。 |
|
insertCell(index) 空のセル（TDタグ要素）を新たに生成し、TRタグ要素に挿入する。引数indexには、挿入したい場所を表すインデックス番号を指定する。インデックスは０から割振られる。もしindexに−１を与えると、最後のセルとして追加される。 |
以上、TABLE/THEAD/TFOOT/TBODY/TRタグ要素のメソッドを見てきたが、これらのメソッドを使って再度同じテーブルを作ると。
<script>
// tableタグ要素を作成
var table = document.createElement('TABLE');
table.id = 'nametbl';
table.border = '1';
// TBODYタグ要素作成し、TABLEタグ要素に追加
var tbody = document.createElement('TBODY');
table.appendChild(tbody);
// 1行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr1 = table.insertRow(0);
var td1_1 = tr1.insertCell(0);
var td1_2 = tr1.insertCell(1);
td1_1.appendChild(document.createTextNode('性'));
td1_2.appendChild(document.createTextNode('名'));
td1_1.className = 'theadercell';
td1_2.className = 'theadercell';
// 2行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr2 = table.insertRow(1);
var td2_1 = tr2.insertCell(0);
var td2_2 = tr2.insertCell(1);
td2_1.appendChild(document.createTextNode('山田'));
td2_2.appendChild(document.createTextNode('太郎'));
// 3行目のTRタグ要素を作成しTBODYタグ要素に追加
var tr3 = table.insertRow(2);
var td3_1 = tr3.insertCell(0);
var td3_2 = tr3.insertCell(1);
td3_1.appendChild(document.createTextNode('佐藤'));
td3_2.appendChild(document.createTextNode('花子'));
// tableタグ要素をBODYタグに追加
document.body.appendChild(table);
</script>
このようになる。
先ほどのコードと比べるとそれなりに短くなった。
createElementメソッドでTABLEタグを新たに生成するところまでは、それほど変わっていないが、そのあとのTRタグの生成するところから大きく変わっている。
var tr1 = table.insertRow(0);
これは新たに生成したTABLEタグ要素に対してinsertRowメソッドを実行している。引数に０を与えているので、最初にからのTRタグ要素が追加される。
この段階で、以下のHTMLと同等のドキュメントツリーが構成されたことになる。
<table border="1" id="nametbl">
<tbody>
<tr></tr>
</tbody>
</table>
これを見て、tbodyタグをcreateElement,appendChildメソッドを使って生成していないのに含まれていることがわかる。実はinsertRowメソッドは、追加する先のTABLEタグ要素が空だった場合には自動的にTBODYタグ要素を追加してくれる。
そのため、TABLEタグ要素には、TBODYタグ要素を新たに生成するメソッドは存在しない。
次に
var td1_1 = tr1.insertCell(0);
var td1_2 = tr1.insertCell(1);
以上のコードで新たに生成されたTRタグ要素の中に、セル（TDタグ要素）を追加する。
新たに生成したTRタグ要素オブジェクトtr1に対して、insertCellメソッドを実行する。
引数０と１を与えて、２つのTDタグ要素を生成する。この段階で、次のHTMLと同等のドキュメントツリーが構成されたことになる。
<table border="1" id="nametbl">
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
最後に
td1_1.appendChild(document.createTextNode('性'));
td1_2.appendChild(document.createTextNode('名'));
以上のコードで、TDタグ要素の中にテキストを挿入する。
TDタグ要素の中にテキストを挿入する処理は、以前のサンプルと同じ。
TDタグ要素内に直接テキストを挿入するプロパティやメソッドはない。
