在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 關(guān)于nodeList的迷思?

關(guān)于nodeList的迷思?

起因: 做dialog組件,不想依賴任何框架.

環(huán)境: Chrome 64.0.3269.3（正式版本）dev （64 位）;

想利用瀏覽器原生實(shí)現(xiàn)string to element

最開始使用:

const div = document.createElement('div');

div.id = ...

// ...省略

思考能不能封裝一個(gè)函數(shù),直接傳入字符串,返回dom

最后實(shí)現(xiàn):

clipboard.png

關(guān)于為何不直接返回div, 一是不想在外多封一層,不和規(guī)范, 這樣下來無關(guān)element太多,
二是不能直接修改parseDom內(nèi)div的屬性,如要修改,又需要增加參數(shù)

clipboard.png

clipboard.png
就加個(gè).trim()方法, 居然顯示都變了??? 黑人問號(hào)

查閱相關(guān)資料, 通過Node.childNodes獲得的nodeList為一個(gè)實(shí)時(shí)的列表,

猜想1: 瀏覽器GC回收?

clipboard.png
瀏覽器并沒有回收掉, appendChild后,并不是clone操作,而是move操作.

最后越來越懵逼,

1.為什么第一次不顯示div和h1;

2.為什么加了.trim()方法后,顯示div和h1卻不顯示text?

3.[...nodeList]把動(dòng)態(tài)nodeList變?yōu)殪o態(tài),為何能正確遍歷出element和text?

循環(huán)太費(fèi)時(shí),最終實(shí)現(xiàn)的方法:

clipboard.png

回答
編輯回答
壞脾滊

為什么parseDom不把div直接return出去
然后直接document.body.appendChild(parseDom("<h1>222</h1>text"))

function parseDom(html){
    var div = document.createElement("div");
    div.innerHTML = html;
    return div;
};
document.body.appendChild(parseDom("<h1>hhhh1</h1><span>sssspen</span>text text"));
2018年6月9日 12:46
編輯回答
六扇門

因?yàn)橥ㄟ^Node.nodeChilds獲取的nodeList是動(dòng)態(tài)的, 而dom在同一時(shí)刻只能存在一個(gè)地方,當(dāng)append到fragment后,node就會(huì)從nodeList中被移動(dòng).
spread后,nodeList變成靜態(tài)的了,所以引用不會(huì)被移動(dòng),而是復(fù)制

2017年9月2日 20:42