JavaScript DOM学習 第7章 フォーム拡張_基礎知識

アイデア
オンライン CD 評価ツールがあると仮定します。ユーザーがお気に入りの CD をすべて表示できるようにしたいと考えています。しかし、ユーザーが平均して何枚の画像を閲覧するかをどうやって知るのでしょうか?このページにフィールドをいくつ追加する必要がありますか?
これは、W3CDOM が登場する前から確かに問題でした。 CD を 7 枚置いたとします。ただし、ユーザーは 1 枚の CD のみを表示したい場合があり、多すぎるとユーザーが恐怖を感じる可能性があるため、すべての CD を表示したいと考えているため、何度も送信する必要があります。これは本当に迷惑です。
W3C DOM を使用する場合のみ、ユーザーは生成するフィールドの数を決定できます。この効果は以前のものとは大きく異なります。
例
送信をクリックすると、フォームは取得したすべてのパラメータを配列形式で送信します。これは、実際にサーバーに送信されたかどうかを確認するために使用されます。残念ながらMac版IE、Safariでは送信できません。
IE の問題
Windows の IE には 2 つの重大な問題があります。
最初の問題は、名前が異なっていても、生成されたすべてのラジオ ボタン ボックスが同じ配列に属していることです。このように、ユーザーはすべてのラジオ ボタン ボックスのうち 1 つだけを選択できます。つまり、生成されたフォームではラジオ ボタンを使用できません。
一部の読者は、innerHTML によって生成されたラジオ ボタンには問題がないと言っています。どうしてもラジオ ボタンを使用したい場合は、試してみてください。
2 番目の問題は、生成されたフォームが従来の document.forms からアクセスできないことです。IE はフォームを配列に含めません。これは、ID を設定することで解決できます。

フォームの HTML コードを説明します:

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

onclick="this.parentNode. parentNode.removeChild(this.parentNode);" />



短いレビュー textarea>

エクスプローラーでテストするためのラジオ ボタンが含まれています:

テスト 1

テスト 2


;input type="button" id="moreFields" value="さらにフィールドを追加してください! />
form>


True フォーム項目は ID readroot の DIV にあり、表示値は none です。この DIV はテンプレートであるため、ユーザーは変更できません。ユーザーがさらにフォームを必要とする場合は、このテンプレートをコピーしてフォームの後に追加します。ユーザーがページを開いたときに表示できるように、最初にこれをロードします。
この DIV はフォームの外にあるため、ユーザーがフォームを送信しても、このテンプレートのコンテンツは送信されません。
ID writeroot を持つ SPAN はタグです。新しく生成されたフォームがその前に挿入されます。
フォーム項目を追加
必要に応じて次のコードを使用してフォーム項目を追加できます:

コードをコピー


コードとして以下:

var counter = 0;
function moreFields() {
counter ;
var newFields = document.getElementById('readroot').cloneNode(true); = ''; newFields.style.display = 'block';
var newField = newField.childNodes;
for (var i=0;i theName = newField[i].name
if (theName)
newField[i].name = theName counter;
}
var insertHere = document.getElementById('writeroot'); insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = moreFields;


すべてのフォーム項目には一意の名前が必要であるため、最初にカウンターが必要です。生成された名前の後にカウンター値を追加します。カウンタを初期化します:

コードをコピーします コードは次のとおりです。 var counter = 0; 次に実際の関数です。カウンタに 1 を加えます。

コードをコピー

コードは次のとおりです。 function moreFields () { counter ;

次に、テンプレートをコピーし、ID を削除し、表示をブロックに設定します。 readroot はドキュメント全体の唯一の ID である必要があり、テンプレートをコピーした後にユーザーが確認できるように表示される必要があります。

コードをコピー

コードは次のとおりです。 var newFields = document.getElementById('readroot ').cloneNode(true); newFields.id = '';

このコピーの子要素を繰り返します。

コードをコピーします

コードは次のとおりです。 var newField = newFields.childNodes; >for (var i=0; i

子要素に name 属性がある場合、その一意性を保証するために name 値にカウンター値を追加します。

コードをコピーします

コードは次のとおりです: var theName = newField[i].name if (theName) newField[i].name = theName counter; }

これで、このコピーを挿入する準備ができました。これを writeroot の前に挿入します:

コードをコピー

コードは次のとおりです: var insertHere = document.getElementById ( 'writeroot'); insertHere.parentNode.insertBefore(newFields,insertHere); }

次に、ユーザーが入力したときにそれを実行します。参照:

コードをコピー

コードは次のとおりです。 window.onload = moreFields; 🎜> フォーム項目を削除します各テンプレートのコピーには削除ボタンがあります:

コードをコピー

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

onclick="this.parentNode.parentNode.removeChild(this.parentNode); /> このボタンをクリックすると、親要素 (DIV) から削除されます。生成されたフォーム全体が消え、再び表示されなくなります。 翻訳アドレス: http://www.quirksmode.org/dom/domform.html 転載のために以下の情報を保管してください

著者: Bei Yu (tw: @rehawk)