JavaScript DOMの操作形式とスタイル_基礎知識

1 操作フォーム

タグは HTML の中で最も複雑な構造であり、DOM を通じて作成および生成したり、

を通じて操作したりできます。

// 使用DOM来创建表格;
 var table = document.createElement('table');
 table.border = 1;
 table.width = 300;

 var caption = document.createElement('caption');
 table.appendChild(caption);
 caption.appendChild(document.createTextNode('人员表'));

 var thead = document.createElement('thead');
 table.appendChild(thead);

 var tr = document.createElement('tr');
 thead.appendChild(tr);

 var th1 = document.createElement('th');
 var th2 = document.createElement('th');

 tr.appendChild(th1);
 th1.appendChild(document.createTextNode('姓名'));
 tr.appendChild(th2);
 th2.appendChild(document.createTextNode('年龄'));

 document.body.appendChild(table);

// テーブルは複雑で多くのレベルがあります。特定の要素を取得するために以前の DOM を使用するのは面倒です。
を使用することをお勧めします。 HTMLDOM のプロパティとメソッドの概要
プロパティまたはメソッド 説明
caption は
要素への参照を保持します。 tBodies は

要素の HTMLCollection を保持します。 tFoot は
要素への参照を保持します。 tHead は
要素への参照を保持します。 rows は 要素の HTMLCollection を保持します。 createTHead() は 要素を作成し、
を返します。 createTFoot() は 要素を作成し、
を返します。 createCpation() は 要素を削除します;
deleteTFoot() は
要素を削除します。 deleteCaption() は 要素によって追加された属性とメソッド rows は、

内の行の HTMLCollection を保持します。 deleteRow(pos) は、指定された位置の行を削除します;
insertRow(pos) は、行コレクション
の指定された位置に行を挿入します。

要素に追加された属性とメソッド

cell は、 要素内のセルの HTMLCollection コレクションを保持します。 deleteCell(pos) は、指定された位置のセルを削除します;

insertCell(pos) は、セル コレクションの指定された位置にセルを挿入し、参照を返します。
//HTMLDOM はテーブルの

と はテーブル内で 1 つだけ存在します。 // そして、 は複数である可能性があるため、最終的に返される は要素のコレクションになります。

2 操作スタイル

CSS は (X)HTML の補助としてページの表示効果を高めることができますが、すべてのブラウザーが最新の CSS 機能をサポートできるわけではありません。 CSS 機能は DOM レベルと密接に関係しているため、現在のブラウザーでサポートされている CSS 機能のレベルを検出する必要があります。

HTML でスタイルを定義するには 3 つの方法があります:

(1) style 属性を使用して、特定の要素のスタイルを定義します。 (2)

要素を作成し、
を返します。 deleteTHead() は

要素を削除します。
deleteRow(pos) は指定された行を削除します;
insertRow(pos) は、行コレクション
の指定された位置に行を挿入します。

を取得します alert(table.caption.innerHTML); // キャプションの内容を取得します;

// PS: