はじめに この記事では、DOM 1.0 の基本的かつ強力なメソッドと、それらを JavaScript で使用する方法を簡単に紹介します。 HTML 要素を動的に作成、取得、制御、削除する方法を学習できます。これらの DOM メソッドは XML にも適用されます。 DOM 1.0 を完全にサポートするすべてのブラウザ (IE5、Firefox など) は、この記事の例を適切に実行できます。
概要 - Sample1.html この記事では、サンプル コードを通じて DOM を紹介します。まずは以下の HTML サンプルを試してみてください。 DOM 1 メソッドを使用して、JavaScript から HTML テーブルを動的に作成します。テキスト コンテンツを含む 4 つのセルで構成される小さなテーブルを作成します。セルのテキスト内容は「このセルは y 番目の行、x 番目の列です」というもので、表内のセルの行数と列数を示します。
head>
コード例 - JavaScript と DOM を使用して HTML テーブルを作成します <script> <br>//body タグを取得しますvar mybody = document.getElementsByTagName("body")[0]; <br><br>// <table> 要素と <br>mytable = document.createElement("table") ; <br>mytablebody = document.createElement("tbody"); <br><br>//すべてのセルを作成します<br>for(var j = 0; j // a <tr>Element<br>mycurrent_row = document.createElement("tr"); <br>for(var i = 0; i // <td>要素を作成します<BR>mycurrent_cell = document.createElement("td"); <BR>//テキスト ノードを作成します<BR>currenttext = document.createTextNode("セルは "j" 番目の行、"i" 番目の列です") ; <BR>// 作成したテキスト ノードを <BR>mycurrent_cell.appendChild(currenttext) に追加します。<BR>// 列 <BR>mycurrent_row.appendChild; mycurrent_cell); <BR>} <BR>// <BR>mytablebody.appendChild(mycurrent_row) に行 <BR> を追加します。 table> <br>mytable.appendChild(mytablebody); <br>// <br>mybody.appendChild(mytable) に <table> を追加します。 2 に設定します <br>mytable.setAttribute("border", "2"); <br></script>
)">
