通过Javascript操作HTML控件时的良好做法

Good practice when manipulating HTML controls via Javascript

本文关键字：Javascript 操作 HTML 控件 通过      更新时间：2023-09-26

操作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;

以下哪一项是好的练习？在特定条件下，一个比另一个更受欢迎吗？

第一种方法看起来更加模块化和可重用。您可能希望将行放在方法中的for循环中，然后调用该方法。

总是第一种方法。若您使用的是innerhtml样式，那个么浏览器就是在创建自己。

第一种方法比第二种方法更好，即

**创建HTML元素比操作DOM""要好

原因：使用DOM会导致浏览器回流

例如：假设您需要将一个元素替换为已经存在的DOM。

使用方法：

  1. 创建DOM元素：创建一个元素。向它添加真实的属性并替换它。元素将一次性添加，并且文档只有一次回流

  2. 操作DOM：您需要逐个添加和删除属性或元素。此可能会导致浏览器触发正在操作的所有元素和属性的回流在处理元素时，这将占用呈现文档流的宝贵资源

因此，创建dom元素要顺畅得多，因为浏览器不必再次呈现文档流。

*EDIT:*如果需要插入多个元素，则最好的方法是创建文档片段。文档片段在内存中，而不是DOM树的一部分。因此，向其添加元素不会导致回流。正如文件所说：

由于文档片段在内存中，而不是主DOM树的一部分，因此向其附加子项不会导致页面回流（计算元素的位置和几何结构）。因此，使用文档片段通常可以获得更好的性能。

相关文章：