javascript 拷貝節(jié)點(diǎn)cloneNode()使用介紹
更新時(shí)間：2014年04月03日 17:05:26 作者：
這篇文章主要介紹了javascript 節(jié)點(diǎn)操作拷貝節(jié)點(diǎn)cloneNode()的使用,需要的朋友可以參考下
cloneNode(a)方法接受一個(gè)布爾值參數(shù),表示是否深拷貝
true:表示執(zhí)行深拷貝,復(fù)制本節(jié)點(diǎn)以及整個(gè)子節(jié)點(diǎn)樹(shù).
false:淺拷貝.只復(fù)制節(jié)點(diǎn)本身.
復(fù)制后返回的節(jié)點(diǎn)副本屬于文檔所有,但是并沒(méi)有父節(jié)點(diǎn).除非使用appendChild,insertChild(),replaceChild()將它添加到文檔
<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
var oDiv = document.getElementById("guoDiv");
var deepList = oDiv.cloneNode(true); //拷貝子節(jié)點(diǎn)
alert(deepList.childNodes.length); //3或7(兼容性問(wèn)題,所以結(jié)果不一樣)
var showList = oDiv.cloneNode(false); //只拷貝當(dāng)前元素的引用
alert(showList.childNodes.length); //0
true:表示執(zhí)行深拷貝,復(fù)制本節(jié)點(diǎn)以及整個(gè)子節(jié)點(diǎn)樹(shù).
false:淺拷貝.只復(fù)制節(jié)點(diǎn)本身.
復(fù)制后返回的節(jié)點(diǎn)副本屬于文檔所有,但是并沒(méi)有父節(jié)點(diǎn).除非使用appendChild,insertChild(),replaceChild()將它添加到文檔
復(fù)制代碼 代碼如下:
<div id="guoDiv">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
var oDiv = document.getElementById("guoDiv");
var deepList = oDiv.cloneNode(true); //拷貝子節(jié)點(diǎn)
alert(deepList.childNodes.length); //3或7(兼容性問(wèn)題,所以結(jié)果不一樣)
var showList = oDiv.cloneNode(false); //只拷貝當(dāng)前元素的引用
alert(showList.childNodes.length); //0
相關(guān)文章
這篇文章主要介紹了js對(duì)象簡(jiǎn)介與基本用法,結(jié)合實(shí)例形式分析了JavaScript對(duì)象的概念、功能、基本用法與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
學(xué)習(xí)的目的是對(duì)裝飾者模式模式有進(jìn)一步的理解，并運(yùn)用在自己的項(xiàng)目中；對(duì)TypeScript裝飾器的理解，更好的使用裝飾器，例如在nodejsweb框架中、vue-property-decorator中，或者是自定義裝飾器，能熟練運(yùn)用并掌握其基本的實(shí)現(xiàn)原理。2021-04-04
使用js實(shí)現(xiàn)幾秒以后倒計(jì)時(shí)跳轉(zhuǎn)，這個(gè)在某些特殊情況下還是比較實(shí)用的，下面為大家介紹下具體的實(shí)現(xiàn)步驟，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
在JavaScript中,有多種方法可以合并數(shù)組,本文主要介紹了8種方法,主要包括concat()、spread operator、push()、unshift()、splice()、Array.from()、Array.prototype.reduce()和ES6的Array.prototype.flat(),感興趣的可以了解一下2023-08-08
fetch 如何實(shí)現(xiàn)請(qǐng)求數(shù)據(jù)
這篇文章主要介紹了fetch 如何實(shí)現(xiàn)請(qǐng)求數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
基于JavaScript實(shí)現(xiàn)游戲購(gòu)物車(chē)效果詳解
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)游戲購(gòu)物車(chē)效果，文中的實(shí)現(xiàn)代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，需要的可以參考一下2022-03-03
前端面向?qū)ο缶幊讨瓻S5語(yǔ)法ES6語(yǔ)法詳解
這篇文章主要為大家介紹了前端面向?qū)ο缶幊讨瓻S5語(yǔ)法ES6語(yǔ)法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Mysql內(nèi)儲(chǔ)存JSON字符串根據(jù)條件進(jìn)行查詢(xún)
本文主要介紹了Mysql內(nèi)儲(chǔ)存JSON字符串根據(jù)條件進(jìn)行查詢(xún)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
IE 下Enter提交表單存在重復(fù)提交問(wèn)題的解決方法
這篇文章主要介紹了IE 下Enter提交表單存在重復(fù)提交問(wèn)題的解決方法,需要的朋友可以參考下2014-05-05
利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能
vue數(shù)據(jù)雙向綁定是通過(guò)數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來(lái)實(shí)現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于如何利用js實(shí)現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能的相關(guān)資料,需要的朋友可以參考下2021-07-07