Dom操縱。所有更改一次

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共同的父的HTML和使用某種形式的搜索並替換RAW HTML以在每個目標元素中找到要更改的部分。然後將該HTML更改回公共父級。

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