鍍金池/ 問答/HTML5  HTML/ 關于nodeList的迷思?

關于nodeList的迷思?

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

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

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

最開始使用:

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

div.id = ...

// ...省略

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

最后實現(xiàn):

clipboard.png

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

clipboard.png

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

查閱相關資料, 通過Node.childNodes獲得的nodeList為一個實時的列表,

猜想1: 瀏覽器GC回收?

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

最后越來越懵逼,

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

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

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

循環(huán)太費時,最終實現(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
編輯回答
六扇門

因為通過Node.nodeChilds獲取的nodeList是動態(tài)的, 而dom在同一時刻只能存在一個地方,當append到fragment后,node就會從nodeList中被移動.
spread后,nodeList變成靜態(tài)的了,所以引用不會被移動,而是復制

2017年9月2日 20:42