成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript DOM 7 - DocumentFragment

Raaabbit / 2240人閱讀

摘要：它的用途主要是在使用時(shí)候，它作為一個(gè)臨時(shí)容器。當(dāng)我們把現(xiàn)有的上的一個(gè)節(jié)點(diǎn)插入給，這個(gè)節(jié)點(diǎn)會(huì)從原上被刪掉。第一點(diǎn)和第二點(diǎn)主要是講利用來進(jìn)行操作在安全性和性能方面的優(yōu)點(diǎn)。第三點(diǎn)也是它作為臨時(shí)容器的一個(gè)優(yōu)點(diǎn)，用完之后呢，會(huì)自己清空自己，不占內(nèi)存。

在之前的文章JavaScript DOM 1里里面曾解釋過各種概念之前的關(guān)系，當(dāng)時(shí)用了一張圖，如下圖：

從這張圖里面，我們可以看到 DocumentFragment 和 Document 是兄弟關(guān)系，都直接繼承自Node類。
DocumentFragment是一種十分特殊的Node,它和Document一樣沒有parentNode. 它可以有后代節(jié)點(diǎn)，也可以使用appendChild()這類的方法。它的用途主要是在使用appendChild(), insertBefore(), replaceChild()時(shí)候，它作為一個(gè)臨時(shí)容器。
先來看一下怎么創(chuàng)建一個(gè)DocumentFragment：

1: document.createDocumentFragment()

 var df = document.createDocumentFragment();

雖然DocumentFragment在級(jí)別上和Document處于同一層，但是創(chuàng)建的時(shí)候，還是在document上調(diào)用方法。

那我們現(xiàn)在來看一看它的特殊之處：

1: DocumentFragment它并不屬于DOM結(jié)構(gòu)的一部分，所以任何對DocumentFragment的操作，不會(huì)影響到DOM

2: 當(dāng)我們給appendChild(), insertBefore(), replaceChild()等傳入一個(gè)DocumentFragment的時(shí)候，是把DocumentFragment的所有子節(jié)點(diǎn)一次性地插入，而不是DocumentFragment本身

3: 當(dāng)我們把DocumentFragment插入到別的節(jié)點(diǎn)之后，DocumentFragment的子節(jié)點(diǎn)會(huì)自動(dòng)被清空。

4: 當(dāng)我們把現(xiàn)有的DOM上的一個(gè)節(jié)點(diǎn)插入給DocumentFragment，這個(gè)節(jié)點(diǎn)會(huì)從原DOM上被刪掉。

第一點(diǎn)和第二點(diǎn)主要是講利用DocumentFragment來進(jìn)行DOM操作在安全性和性能方面的優(yōu)點(diǎn)。第三點(diǎn)也是它作為臨時(shí)容器的一個(gè)優(yōu)點(diǎn)，用完之后呢，會(huì)自己清空自己，不占內(nèi)存。特別要注意的是第四點(diǎn)，還挺出乎我意料的，我就第四點(diǎn)來做一個(gè)實(shí)驗(yàn)：
還是我們的老朋友HTML:

    
    
  • book 1
    • 
    
  • book 2
    •

我們創(chuàng)建一個(gè)DocumentFragment，然后把第一個(gè)"

  • "給它做子節(jié)點(diǎn)：

    var bookList = document.getElementsByClassName("bookList")[0];
var firstLi = bookList.firstElementChild;

var df = document.createDocumentFragment();
df.appendChild(firstLi);

    在執(zhí)行了上面的代碼之后，原來的HTML就變成了：

      
        
    
    • book 2
      •

    可以看到，我們把第一個(gè)"

  • "插入到了我們創(chuàng)建的DocumentFragment里面, 然后這個(gè)"
  • "就從原來的DOM里面消失了

    • 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/83641.html

    相關(guān)文章

    • JavaScript筆記——常見DOM知識(shí)

      摘要：前言本篇文章以介紹常見的節(jié)點(diǎn)知識(shí)元素操作方法為目的，其中也對一些比較容易忽略的問題進(jìn)行簡要說明。此外，還有一些方式可以獲得相關(guān)的元素節(jié)點(diǎn)。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。 前言 本篇文章以介紹常見的DOM節(jié)點(diǎn)知識(shí)、DOM元素操作方法為目的，其中也對一些比較容易忽略的問題進(jìn)行簡要說明。才疏學(xué)淺，如有紕漏之處或建議歡迎留下評論。 Node節(jié)點(diǎn) 首先，簡單看看Node...

      madthumb 評論0 收藏0

    • DOM操作筆記

      摘要：它實(shí)際上等于清除當(dāng)前文檔流，重新寫入內(nèi)容方法用于關(guān)閉方法所新建的文檔。如果頁面已經(jīng)渲染完成關(guān)閉了，再調(diào)用方法，它會(huì)先調(diào)用方法，擦除當(dāng)前文檔所有內(nèi)容，然后再寫入我們的頁面渲染的時(shí)候就會(huì)去打開一個(gè)文檔流，當(dāng)渲染繪制結(jié)束，就關(guān)閉這個(gè)文檔流。 一、DOM簡介 1、定義： DOM 是 JavaScript 操作網(wǎng)頁的接口，全稱為文檔對象模型（Document Object Model）。 2、作...

      newtrek 評論0 收藏0

    • 前端優(yōu)化-Javascript篇(4.DOM優(yōu)化)

      摘要：優(yōu)化策略跟上面的大同小異，就是用局部變量緩存集合以及集合的長度，我就不進(jìn)行實(shí)際測試了。例如錯(cuò)誤的做法使用修改來進(jìn)行優(yōu)化如果需要?jiǎng)討B(tài)修改，那么就使用批量處理操作并且讓元素脫離文檔流，等操作結(jié)束后再放回文檔流中。 上篇我介紹了Javascript標(biāo)識(shí)符查找方面的優(yōu)化，可以看出在這方面的優(yōu)化給性能帶來的提升并不明顯，甚至可以說基本沒有影響。但是，我今天要分享的是前端Javascript優(yōu)化的...

      Prasanta 評論0 收藏0

    • DOM操作相關(guān)文章(持續(xù)更新中)

      摘要：將返回匹配到的第一個(gè)元素，如果沒有匹配的元素則返回。這是原生方法，比起速度快，缺點(diǎn)是不支持。推薦文章更快捷的操作的途徑代碼持續(xù)更新中 querySelector：選擇相應(yīng)的元素標(biāo)簽具有和jquery類似的寫法用法： document.querySelector(div.test>p:first-child); document.querySelector(#test); （返回指定元素...

      xioqua 評論0 收藏0

    • 個(gè)人常用JavaScript及React常用優(yōu)化總結(jié)

      摘要：插件性能優(yōu)化及個(gè)人常用優(yōu)化方法經(jīng)常會(huì)觸發(fā)視覺變化。作用域鏈指的是當(dāng)前作用于下可用變量的集合，它在各種主流瀏覽器中至少包含兩個(gè)部分局部變量的集合和全局變量的集合。在考慮優(yōu)化時(shí)，數(shù)值和變量的性能差不多，并且速度顯著優(yōu)于對象屬性和數(shù)組元素。 JavaScript 插件性能優(yōu)化及個(gè)人react常用優(yōu)化方法 JavaScript 經(jīng)常會(huì)觸發(fā)視覺變化。有時(shí)是直接通過樣式操作，有時(shí)是會(huì)產(chǎn)生視覺變化...

      yuanxin 評論0 收藏0

    發(fā)表評論

    0條評論

    閱讀需要支付1元查看
    <