中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

方案二：在非渲染區(qū)修改DOM

（emu注：作者在這里再次腦子短路，把DocumentFragment DOM Generation模式的介紹提前到這里來了，emu只好再次發(fā)揮一下）
上一個方案解決的是修改一個超鏈接的問題，當(dāng)一次需要對很多個超鏈接進行相同修改的時候，這個方案就可以大顯身手了。

需求：

需求是這樣的，我們要寫一個函數(shù)來修改一個指定元素的子元素中所有的超鏈接的樣式名（className）屬性。要實現(xiàn)很簡單，我們可以通過遍歷每 個超鏈接并且修改它們的樣式名來完成任務(wù)。但是帶來的問題就是，每修改一個超鏈接都會導(dǎo)致一次重解析。

function updateAllAnchors(element, anchorClass) {
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
}

解決方案：

要解決這個問題，我們可以把被修改的指定元素從DOM里面移除，再修改所有的超鏈接，然后在把這個元素插入回到它原來的位置上。為了完成這個復(fù)雜的 操作，我們可以先寫一個可重用的函數(shù)，它不但移除了這個DOM節(jié)點，還返回了一個把元素插回到原來的位置的函數(shù)。

/**
 * Remove an element and provide a function that inserts it into its original position
 * @param element {Element} The element to be temporarily removed
 * @return {Function} A function that inserts the element into its original position
 **/
function removeToInsertLater(element) {
  var parentNode = element.parentNode;
  var nextSibling = element.nextSibling;
  parentNode.removeChild(element);
  return function() {
    if (nextSibling) {
      parentNode.insertBefore(element, nextSibling);
    } else {
      parentNode.appendChild(element);
    }
  };
}

有了上面這個函數(shù)，現(xiàn)在我們就可以在一個不需要解析渲染的元素上面修改那些超鏈接了。這樣只在移除和插入元素的時候各觸發(fā)一次重解析。

function updateAllAnchors(element, anchorClass) {
  var insertFunction = removeToInsertLater(element);
  var anchors = element.getElementsByTagName('a');
  for (var i = 0, length = anchors.length; i < length; i ++) {
    anchors[i].className = anchorClass;
  }
  insertFunction();
}

出處：emu in blogjava
責(zé)任編輯：bluehearts

上一頁 加速Javascript:DOM操作優(yōu)化 [1] 下一頁 加速Javascript:DOM操作優(yōu)化 [3]

◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。