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

yankeys 發布于2019-08-21 11:25 / 1593人閱讀

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

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);
如果參數obj1不是字符串，而是一個已渲染的dom對象（ul.children[1]），那么進行插入操作時，會移動這個dom節點到指定的位置，而不是復制一個這個節點。

云服務器 GPU云服務器 js原生dom事件 js操作dom對象 js 對象插入數據 DOM渲染

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

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

XCel 項目總結 - Electron 與 Vue 的性能優化

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

XUI 2019-08-22 10:45 評論0 收藏0
React 導讀（一）

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

kumfo 2019-08-22 15:35 評論0 收藏0
原生JS中DOM節點相關API合集

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

junfeng777 2019-08-20 15:37 評論0 收藏0
原生JS中DOM節點相關API合集

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

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

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

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