javascript - 多姆操纵。所有更改同时进行

Question

我有一个我编写的简单模块。目的是在页面上创建与某个类名下的任意url的链接

下面是完成所有脏工作的主函数

generateLinks: function(){
    $('.link-gen').each(function(index, item){
        var replace = $(item).html().replace(_regEx, _linkMarkUp);
        $(item).html(replace);
    });
}

据我了解，我应该尝试立即应用所有 dom 更改，这样我就不需要不断访问 dom。如果我可能要修改页面上的许多不同链接，我该如何做？

Answer 1

我会尽力回答您的问题的具体内容。

如果您需要修改页面中的 N 个单独元素，您的选择是:

1. 获取包含所有 N 个单独元素的 HTML 的公共(public)父级的 HTML，并在原始 HTML 上使用某种搜索和替换来查找每个目标元素中要更改的部分。然后将更改后的 HTML 设置回公共(public)父级。

2. 对整个 HTML 正文执行与上述步骤相同的操作。

3. 在 DOM 中找到需要修改的每个对象并直接更改其 HTML(就像您当前的代码所做的那样)。

虽然选项 1 和 2 的 DOM 操作较少，但它们通常是一种不好的方法，因为您要求浏览器做大量繁重的工作，丢弃大量现有的 DOM 对象，再次从头开始解析原始 HTML 并然后创建大量新的 DOM 对象。这还有一个副作用，就是清除该 HTML 中所有现有的事件处理程序(因为它们都是新的 DOM 对象)。所以大多数情况下不推荐使用1和2。

这给你留下了选项 3，这就是你已经在做的事情。要修改 N 个单独的对象，请使用 N 个 DOM 操作 - 每个对象一个。

<小时/>

我怀疑你读到的评论是为了解决这样的事情是一件坏事(大量的 DOM 操作，但都在一个对象上):

var item = $("#foo");
for (var i = 0; i < collection.length; i++) {
    item.html(item.html() + "<br"> + collection[i]);
}

当这样的事情会好很多时(一次 DOM 操作):

var item = $("#foo");
var newText = "";
for (var i = 0; i < collection.length; i++) {
    newText += "<br"> + collection[i];
}
item.html(item.html() + newText);