js原生，將已渲染dom對象插入指定位置后結(jié)果分析

yankeys 發(fā)布于2019-08-21 11:25 / 1626人閱讀

摘要：把插到的前面分析如果參數(shù)不是字符串，而是一個已渲染的對象，那么進行插入操作時，會移動這個節(jié)點到指定的位置，而不是復(fù)制一個這個節(jié)點。

HTML:

js：

function swop(obj1,obj2){
        obj2.parentNode.insertBefore(obj1,obj2);
    }
var ul=document.getElementsByTagName("ul")[0];
swop(ul.children[1],ul.children[3] );//把2插到4的前面

result：

分析：
obj2.parentNode.insertBefore(obj1,obj2);
如果參數(shù)obj1不是字符串，而是一個已渲染的dom對象（ul.children[1]），那么進行插入操作時，會移動這個dom節(jié)點到指定的位置，而不是復(fù)制一個這個節(jié)點。

云服務(wù)器 GPU云服務(wù)器 js原生dom事件 js操作dom對象 js 對象插入數(shù)據(jù) DOM渲染

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86678.html

相關(guān)文章

XCel 項目總結(jié) - Electron 與 Vue 的性能優(yōu)化

摘要：而這里的單元格信息是唯一的，所以直接通過為一個空對象賦值即可。和相關(guān)的知識和技巧高亮的列單元格采用展示。在中，被選中的單元格會高亮相應(yīng)的行和列，以提醒用戶。 showImg(https://segmentfault.com/img/bVGkdk?w=900&h=500); XCEL 是一個 Excel 數(shù)據(jù)清洗工具，其通過可視化的方式讓用戶輕松地對 Excel 數(shù)據(jù)進行篩選。 XCEL...

XUI 2019-08-22 10:45 評論0 收藏0
React 導(dǎo)讀（一）

摘要：需要有一定的基礎(chǔ)和的使用經(jīng)驗。這就是屬性的作用。方法接收一個新對象來重新賦值。也接收一個函數(shù)，這個回調(diào)函數(shù)這里我默認有一個參數(shù)，表示之前的的值，這個函數(shù)的返回值就是最新的。但是不同的是在組件內(nèi)部是只讀的。前言寫這篇文章的主要目標是讓初學(xué)者更快的上手 React 的項目開發(fā)，能有一個循循漸進的理解過程。需要有一定的 JavaScript 基礎(chǔ)和 NPM 的使用經(jīng)驗。不多說了，下面會按...

kumfo 2019-08-22 15:35 評論0 收藏0
原生JS中DOM節(jié)點相關(guān)API合集

摘要：返回一個個比特位的二進制值，表示參數(shù)節(jié)點和當前節(jié)點的關(guān)系返回布爾值，用于檢查兩個節(jié)點是否相等。生成一個對象事件方法生成一個事件對象，該對象能被方法使用注冊事件注銷事件觸發(fā)事件其他返回一個布爾值，表示當前文檔之中是否有元素被激活或獲得焦點。原生JS中DOM節(jié)點相關(guān)API合集節(jié)點屬性 Node.nodeName //返回節(jié)點名稱，只讀 Node.nodeType //返回節(jié)點類...

junfeng777 2019-08-20 15:37 評論0 收藏0
原生JS中DOM節(jié)點相關(guān)API合集

摘要：返回一個個比特位的二進制值，表示參數(shù)節(jié)點和當前節(jié)點的關(guān)系返回布爾值，用于檢查兩個節(jié)點是否相等。生成一個對象事件方法生成一個事件對象，該對象能被方法使用注冊事件注銷事件觸發(fā)事件其他返回一個布爾值，表示當前文檔之中是否有元素被激活或獲得焦點。原生JS中DOM節(jié)點相關(guān)API合集節(jié)點屬性 Node.nodeName //返回節(jié)點名稱，只讀 Node.nodeType //返回節(jié)點類...

BaronZhang 2019-08-01 16:38 評論0 收藏0
vue源碼閱讀之數(shù)據(jù)渲染過程

摘要：圖在中應(yīng)用三數(shù)據(jù)渲染過程數(shù)據(jù)綁定實現(xiàn)邏輯本節(jié)正式分析從到數(shù)據(jù)渲染到頁面的過程，在中定義了一個的構(gòu)造函數(shù)。一、概述 vue已是目前國內(nèi)前端web端三分天下之一，也是工作中主要技術(shù)棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進行總結(jié)。本文旨在梳理初始化頁面時data中的數(shù)據(jù)是如何渲染到頁面上的。本文將帶著這個疑問一點點追究vue的思路?？傮w來說vue模版渲染大致流程如圖1所...

AlphaGooo 2019-05-22 16:53 評論0 收藏0