4

HTML コントロールを操作する良い方法は何ですか?

HTML要素を作成することによって？

var select = document.getElementById("MyList");
var options = ["1", "2", "3", "4", "5"];
for (var i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.Text = opt;
    el.value = opt;
    el.innerHTML = opt;
    select.appendChild(el);
}

または、HTML を操作して:

    var options = new Array(2);
    options [0] = '1';
    options [1] = '2';

    options [0] = '<option>' + options [0] + '</option>';
    options [1] = '<option>' + options [1] + '</option>';

    var newHTML = '<select>' + options [0] + options [1] + '</select>';
    selectList.innerHTML = newHTML;

これらのうちどれが良い習慣ですか? 特定の条件で、どちらが優先されますか?

4

3 に答える 3

4

最初のアプローチは、よりモジュラーで再利用可能に見えます。メソッドの for ループ内に行を入れて、そのメソッドを呼び出すことができます。

于 2013-08-12T20:07:55.903 に答える
1

最初の方法は 2 番目の方法よりも優れています。つまり、

** HTML 要素を作成することは、DOM を操作するよりも優れています"

理由: DOM を使用していると、ブラウザーのリフローが発生する可能性があります。

例: 要素を既存の DOM に置き換える必要があるとします。

アプローチの使用：

  1. DOM 要素の作成: 要素を作成します。それにさまざまな属性を追加して置き換えます。要素は一度に追加され、ドキュメントのリフローは 1 回だけです。

  2. DOM の操作: 属性または要素を 1 つずつ追加および削除する必要があります。これにより、ブラウザーは、操作されているすべての要素と属性のリフローをトリガーする可能性があります。これは、要素が操作されるときにドキュメントの流れをレンダリングする際に貴重なリソースを消費します。

したがって、ブラウザーがドキュメントのフローを再度レンダリングする必要がないため、dom 要素の作成は非常にスムーズです。

*編集: *多くの要素を挿入する必要がある場合、最適な方法はドキュメント フラグメントを作成することです。ドキュメント フラグメントはメモリ内にあり、DOM ツリーの一部ではありません。したがって、要素を追加してもリフローは発生しません。ドキュメントが言うように：

ドキュメント フラグメントはメモリ内にあり、メイン DOM ツリーの一部ではないため、それに子を追加してもページ リフロー (要素の位置とジオメトリの計算) は発生しません。したがって、ドキュメント フラグメントを使用すると、多くの場合、パフォーマンスが向上します。

于 2013-08-12T20:22:18.613 に答える
1

常に最初のアプローチ。innerhtml スタイルを使用している場合、ブラウザはそれ自体を作成しています。

于 2013-08-12T20:12:32.960 に答える