DOM節(jié)點(二)：操作節(jié)點

Winer 發(fā)布于2019-08-22 16:01 / 1235人閱讀

摘要：如果傳入的節(jié)點已經是文檔的一部分了，那結果就是將該節(jié)點從原來的位置轉移到新位置這個方法接受兩個參數要插入到節(jié)點和作為參照的節(jié)點。要替換的節(jié)點將由這個方法返回并從文檔樹中被移除，同時要插入的節(jié)點占據其位置。

appendChild()

用于向childNodes列表的末尾添加一個節(jié)點。

var returnedNode = someNode.appendChild(newNode);

如果傳入的節(jié)點已經是文檔的一部分了，那結果就是將該節(jié)點從原來的位置轉移到新位置

insertBefore()

這個方法接受兩個參數：要插入到節(jié)點和作為參照的節(jié)點。插入節(jié)點后，被插入的節(jié)點會變成參照節(jié)點的前一個同胞節(jié)點(previousSibing)

//插入到最后一個子節(jié)點的前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);

replaceChild()

這個方法接受兩個參數：要插入的節(jié)點和要替換的節(jié)點。要替換的節(jié)點將由這個方法返回并從文檔樹中被移除，同時要插入的節(jié)點占據其位置。
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

removeChild()

這個方法接受一個參數，即要移除的節(jié)點。被移除的節(jié)點將成為方法的返回值

var formerFirstChild = someNode.removeChild(someNode.firstChild);

cloneNode()

用于創(chuàng)建調用這個方法的節(jié)點完全相同的副本。cloneNode()方法接受一個布爾值參數，表示是否執(zhí)行深復制。在參數為true的情況下，執(zhí)行深復制，
也就是復制節(jié)點及其整個子節(jié)點樹；在參數為false的情況下，執(zhí)行淺復制，即只復制節(jié)點本身

myList:

    item 1
    item 2
    item 3


var deepList = myList.cloneNode(true);
console.log(deepList.childNodes.length); //3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93974.html

虛擬Dom詳解 - (二)

摘要：第一篇文章中主要講解了虛擬基本實現(xiàn)，簡單的回顧一下，虛擬是使用數據描述的一段虛擬節(jié)點樹，通過函數生成其真實節(jié)點。并添加到其對應的元素容器中。在創(chuàng)建真實節(jié)點的同時并為其注冊事件并添加一些附屬屬性。第一篇文章中主要講解了虛擬DOM基本實現(xiàn)，簡單的回顧一下，虛擬DOM是使用json數據描述的一段虛擬Node節(jié)點樹，通過render函數生成其真實DOM節(jié)點。并添加到其對應的元素容器中。在創(chuàng)建...

sevi_stuo 2019-08-26 10:46 評論0 收藏0
jQuery入門筆記之（二）文檔對象模型

摘要：刪除指定的屬性，這個方法就不可以使用匿名函數，傳遞和均無效。遍歷對象數組索引，鍵，屬性名屬性值，值相當于遍歷原生對象數組時，為元素。在使用使用時，可以使用傳入匿名函數的方法，實現(xiàn)由默認到幾個之間的切換。轉自個人博客基礎 DOM 和和 CSS 一. 設置元素及內容我們通過前面所學習的各種選擇器、過濾器來得到我們想要操作的元素。這個時候，我們就可以對這些元素進行 DOM 的操作。...

FleyX 2019-08-19 17:17 評論0 收藏0
學習Virtual Dom筆記

摘要：通過深度優(yōu)先遍歷兩棵樹，每層節(jié)點進行對比，記錄下每個節(jié)點的差異。所以可以對那棵樹也進行深度優(yōu)先遍歷，遍歷的時候從步驟二生成的對象中找出當前遍歷的節(jié)點差異，然后進行操作。實現(xiàn)虛擬(Virtual) Dom 把一個div元素的屬性打印出來，如下： showImg(https://segmentfault.com/img/bVbnPe1?w=1239&h=336); 可以看到僅僅是第一層，...

DobbyKim 2019-08-26 13:28 評論0 收藏0
react diff算法

摘要：算法的本質是對傳統(tǒng)遍歷算法的優(yōu)化策略用三大策略將復雜度轉化為復雜度策略一中節(jié)點跨層級的移動操作特別少，可以忽略不計。當節(jié)點處于同一層級時，提供三種節(jié)點操作刪除插入移動。在舊的節(jié)點中的，它的，不滿足的條件，因此不做移動操作。一、react diff算法 diff算法的作用計算出Virtual DOM中真正變化的部分，并只針對該部分進行原生DOM操作，而非重新渲染整個頁面。傳統(tǒng)di...

imccl 2019-08-23 18:13 評論0 收藏0
幫你讀懂preact源碼（二）

摘要：最后刪除新的樹中不存在的節(jié)點。而中會記錄對其做了相應的優(yōu)化，節(jié)點的的情況下，不做移動操作。這種情況，在中得到了優(yōu)化，通過四個指針，在每次循環(huán)中先處理特殊情況，并通過縮小指針范圍，獲得性能上的提升。上篇文章已經介紹過idff的處理邏輯主要分為三塊，處理textNode，element及component，但具體怎么處理component還沒有詳細介紹，接下來講一下preact是如何處理...

Warren 2019-08-22 17:24 評論0 收藏0