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

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

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

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不是字符串，而是一個(gè)已渲染的dom對(duì)象（ul.children[1]），那么進(jìn)行插入操作時(shí)，會(huì)移動(dòng)這個(gè)dom節(jié)點(diǎn)到指定的位置，而不是復(fù)制一個(gè)這個(gè)節(jié)點(diǎn)。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/86678.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

AlphaGooo 2019-05-22 16:53 評(píng)論0 收藏0