JavaScriptとDOMを組み合わせてテーブルインスタンスを動的に作成_基礎知識

はじめに
この記事では、DOM 1.0 の基本的かつ強力なメソッドと、それらを JavaScript で使用する方法を簡単に紹介します。 HTML 要素を動的に作成、取得、制御、削除する方法を学習できます。これらの DOM メソッドは XML にも適用されます。 DOM 1.0 を完全にサポートするすべてのブラウザ (IE5、Firefox など) は、この記事の例を適切に実行できます。
概要 - Sample1.html
この記事では、サンプル コードを通じて DOM を紹介します。まずは以下の HTML サンプルを試してみてください。 DOM 1 メソッドを使用して、JavaScript から HTML テーブルを動的に作成します。テキスト コンテンツを含む 4 つのセルで構成される小さなテーブルを作成します。セルのテキスト内容は「このセルは y 番目の行、x 番目の列です」というもので、表内のセルの行数と列数を示します。

コードをコピー コードは次のとおりです。

head>

<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>
)">





要素とテキスト ノードを作成する順序に注意してください :

1. < table > を作成します。
2.
の子要素を作成します。 tbody >tr >
4. 各 < tb > に対してサブ要素
を作成します。 ;

< table >、< tbody >、< tr >、< td > 要素とテキスト ノードを逆の順序で追加します。

1. 作成したテキストノードを
に追加します。

mycurrent_cell.appendChild(currenttext);

2. 行

に列を追加します。

mycurrent_row.appendChild(mycurrent_cell);

3.

に行を追加します。

mytablebody.appendChild(mycurrent_row);

4.

に

を追加します。

mytable.appendChild(mytablebody);

5. に追加します。

mybody.appendChild(mytable);

この方法を覚えておいてください。 W3C DOM を操作する場合、これを頻繁に使用します。まず、要素を上から下に構築し、次にそれらを下から上に親ノードに追加します。

これは JavaScript コードによって生成された HTML です:

...

セルは行 0、列 0	セルは行 0 行 0 、列 1
セルは行 1、列 0	セルは行 1、列 1 td>

...
これは、コードによって生成されたテーブル要素とその子要素の DOM オブジェクト ツリーです:

このようなテーブルとその子要素を構築するには、いくつかの DOM メソッドを使用するだけです。作成する構成のモデル ツリーを常に念頭に置いてください。これにより、コードの記述が容易になります。図の < table > には子要素

があります。 には 2 つの子要素があります。 < tbody > (< tr >) の各子要素には < 2 つの子要素があります。最後に、各 < には 1 つの子要素 ​​(テキスト ノード) があります。

基本的な DOM メソッド - Sample2.html getElementByTagName メソッドはドキュメントと要素に適用されるため、ドキュメント ルート オブジェクトにはすべての要素オブジェクトと同じ getElementByTagName メソッドがあります。 element.getElementsByTagName(tagname) を使用すると、要素のすべての子要素のリストを取得し、タグ名を使用して子要素を選択できます。
element.getElementsByTagName は、特定のタグ名を持つ子要素のリストを返します。 item メソッドを呼び出して (インデックス パラメーターを渡して)、この子要素のリストから要素を取得できます。リストの最初の子要素のインデックスは 0 であることに注意してください。次のトピックでは、前のテーブルの例を続けます。次の例はより単純で、いくつかの基本的なメソッドを示しています。

コードをコピーします コードは次のとおりです:

<script> <br>// すべての body 要素を含むリストを取得します (存在するのは 1 つだけです) <br>// 次に、リスト内の最初の要素を選択します <br>myBody = document.getElementsByTagName("body")[0]; 🎜 ><br>//ボディ要素内のすべての p 要素を取得します。 <br>myBodyElements = myBody.getElementsByTagName("p"); <br><br>//p 要素リストの 2 番目の要素を取得します (インデックスは 0 から) start) <br>myP = myBodyElements[1]; <br></script>

こんにちは

この例では、myP 変数を、本文の 2 番目の p 要素を表す DOM オブジェクトに設定します。
1. すべての body 要素を含むリストを取得します

myBody = document.getElementsByTagName("body")[0];

有効な HTML ドキュメントには body 要素が 1 つしかないため、このリストには項目が 1 つだけあります。 [0] を使用してリストの最初の要素を選択することで取得します。
2. ブログのサブ要素

内のすべての p 要素を取得します。

myBodyElements = myBody.getElementsByTagName("p");

3. p 要素リストの 2 番目の項目を選択します

myP = myBodyElements[1];

HTML 要素の DOM オブジェクトを取得したら、そのプロパティを設定できます。たとえば、スタイルの背景色属性を設定したい場合は、以下を追加するだけです:

myP.style.background = "rgb(255,0,0)";

document.createTextNode("..") を使用してテキスト ノードを作成します。
ドキュメント オブジェクトを使用して createTextNode メソッドを呼び出し、テキスト ノードを作成します。テキストの内容を入力するだけです。戻り値は、このテキスト ノードを表すオブジェクトです。

myTextNode = document.createTextNode("world");

上記のコードは、テキスト データが "word" である TEXT_NODE 型 (テキスト ブロック) ノードを作成し、変数 myTextNode がこのノード オブジェクトを指します。このテキストを HTML ページに挿入するには、このテキスト ノードを他のノード要素のバイト ポイントに設定する必要があります。
appendChild(..) を使用して要素を挿入します。
したがって、myP.appendChild([node_element]) を呼び出すことで、このテキスト ノードを 2 番目の p 要素のバイト ポイントに設定します。

myP.appendChild(myTextNode);

この例をテストすると、「hello」と「world」という単語が「helloworld」のように結合されていることがわかります。したがって、HTML ページを見ると、hello と world という 2 つのテキスト ノードが 1 つのノードのように見えますが、実際には、このドキュメント モデルには 2 つのノードがあります。 2 番目のノードは新しい TEXT_NODE タイプのノードで、2 番目の p タグの 2 番目のバイト ポイントです。下の画像は、ドキュメント ツリーに作成されたばかりのテキスト ノードを示しています。

createTextNode と appendChild は、hello と world の間にスペースを追加する簡単な方法です。 world が hello の後に追加されるのと同じように、appendChild メソッドは最後の子ノードの後に​​追加されることに注意することが重要です。したがって、hello と world の間にテキスト ノードを追加する場合は、appendChild の代わりに insertBefore メソッドを使用する必要があります。

ドキュメント オブジェクトと createElement(..) メソッドを使用して新しい要素を作成する
createElement メソッドを使用して、新しい HTML 要素またはその他の必要な要素を作成できます。たとえば、バイト ポイントを < body > 要素に追加する場合は、前の例で myBody を使用して新しい要素ノードを追加します。ノードを作成するには、document.createElement("tagname") を呼び出すだけです。例:

myNewPTAGnode = document.createElement("p");
myBody.appendChild(myNewPTAGnode);

removeChild(..) メソッドを使用してノードを削除します
各ノードを削除できます。次のコード行は、myP (2 番目の < p > 要素) 内の単語 world を含むテキスト ノードを削除します。

myP.removeChild(myTextNode);

最後に、world という単語を含むテキスト ノード myTextNode を、新しく作成した < p > 要素に追加します。

myNewPTAGnode.appendChild(myTextNode);

変更されたオブジェクト ツリーは最終的に次のようになります。

テーブルを動的に作成します (Sample1.html に戻ります) 残りの部分記事はSample1.htmlに戻ります。この例で作成するテーブルのオブジェクトツリー構造を次の図に示します。

HTML テーブルの構造を確認する

要素ノードを作成し、ドキュメント ツリーに追加するサンプル 1 のテーブル作成の基本.html 手順:
本体オブジェクト (ドキュメント オブジェクトの最初の項目) を取得します。 最後に、上記のテーブル構造に従って各バイト ポイントを追加します。 以下のソース コードは、sample1.html のコメントです。

start 関数の最後に新しいコード行があり、別の DOM メソッド setAttribute を使用してテーブルの境界属性を設定します。 setAttribute メソッドには、属性名と属性値の 2 つのパラメーターがあります。 setAttribute メソッドを使用して、任意の要素の任意の属性を設定できます。

コードをコピー コードは次のとおりです:

<script> { <br> / / ボディを取得します <br>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 // <tr> 要素を作成します <br>mycurrent_row = document.createElement("tr"); <br><br>for(var i = 0; i // 作成します<td> 要素 <br>mycurrent_cell = document.createElement("td"); <br>// テキスト ノードを作成します<br>currenttext = document.createTextNode("セルは "j" 行です , " " column"); <br>// 作成したテキスト ノードを <td> 要素に追加します <BR>// <td> を <Row<BR>mycurrent_row.appendChild(mycurrent_cell); <BR>} <BR>// <BR>mytablebody.appendChild(mycurrent_row) <BR>/ に <tr> 行を追加します。 / <BR>mytable> に <BR> を追加します。 <br>mybody.appendChild(mytable); / mytable のボーダー属性を 2 に設定します。<br><BR></head><BR> ;body onload="start()"> <br></body> <br></html> からのテキスト ノードの取得table <br><br> この例では、2 つの新しい DOM プロパティを導入します。まず、childNodes 属性を使用して、mycel のバイト ポイント リストを取得します。この childNodes リストには、名前やタイプに関係なく、すべてのバイト ノードが含まれます。 getElementsByTagName メソッドと同様に、バイト ポイントのリストを返します。[ x ] を使用して目的のバイト ポイント項目を取得します。この例では、myceltext をテーブルの 2 行目の 2 番目のセルにテキスト ノードとして保存します。最後に、myceltext の data 属性を含む新しいテキスト ノードを作成し、それを < body > 要素の子にします。これは、この例の最終結果を示しています。 <br> <br>オブジェクトがテキスト ノードの場合は、data 属性を使用してそのコンテンツを取得できます <br><br><br><br> </div>コードをコピーします <br><ins datetime="2006-07-02T22:50:58"><strong> コード</strong></ins><br>mybody = document.getElementsByTagName("body")[0]; <strong>mytable = mybody.getElementsByTagName("table")[0]; </strong>mytablebody = mytable .getElementsByTagName(" tbody")[0]; <br>myrow = mytablebody.getElementsByTagName("tr")[1]; myrow.getElementsByTagName("td")[1]; >// mycel バイトポイントリストの最初の項目 <p>myceltext=mycel.childNodes[0]; <br></p> <div class="codetitle">//currenttext の内容は myceltext のデータです <span>currenttext=document.createTextNode( myceltext.data); <a style="CURSOR: pointer" data="2605" class="copybut" id="copybut2605" onclick="doCopy('code2605')">mybody.appendChild(currenttext); <u></u></a></span> </div>属性値を取得します<div class="codebody" id="code2605"> <br> mytable オブジェクトの setAttribute メソッドを使用します。このセルは、このテーブルの境界線属性を設定するために使用されます。 getAttribute メソッドを使用してこの属性を取得します: <br> <br>mytable.getAttribute("border");<br> <br><br>style 属性を変更して列を非表示にする <br><br> JavaScript 変数を使用してオブジェクトを指す場合、その style 属性をすぐに設定できます。次のコードは、sample1.html を変更したもので、2 列目のセルが非表示になり、1 列目のセルの背景が赤に変更されます。 style 属性が直接設定されることに注意してください。 <br><br><br><br><br>コードをコピー<br> </div> <br> コードは次のとおりです:<strong><div class="codebody" id="code84043"> <br><html> <br><body<body> <br><script> >var mybody =document.getElementsByTagName("body")[0]; <br>mytable = document.createElement("table"); <br><br> for(var j = 0; j mycurrent_row=document.createElement("tr"); <br>for(var i = 0; i mycurrent_cell = document.createElement("td"); <br>currenttext = document.createTextNode("セルは次のとおりです: " i j); <br>mycurrent_row.appendChild(mycurrent_cell); 🎜>// 列 0 のセルの背景色を設定する場合<br>// 列 1 のセルを非表示にする場合<br>if (i == 0) { <br>mycurrent_cell.style.background = "rgb( 255, 0,0)"; <br>} else { <br>mycurrent_cell.style.display = "none"; <br>} <br>} <br>mytablebody.appendChild(mycurrent_row); <br>} <br> mytable.appendChild(mytablebody); <br>mybody.appendChild(mytable); <br></script>

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。