dom操作之文件碎片

2021-06-28 00:04:12 字數 607 閱讀 2522

在日常的工作中,避免不了我們要想乙個元素中插入大量的動態元素,比如:

在頁面中有乙個ul,我們隨著頁面的某乙個事件的觸發,需要向#box中插入大量的li,正常的寫法為:

var oul = document.queryselectorall('#box')[0];

for(var i=0;i<1000;i++)

var frag = document.createdocumentfragment();
然後再通過oul加入文件碎片:

這樣也就觸發了一次oul的重新繪製,效能上會大大提高,完整**:

var frag = document.createdocumentfragment(),

oli = null,

t = '',

oul = document.queryselectorall('#box')[0];

for(var i = 0;i < 1000;i++)

console.log(frag);

當然你也可以使用字串拼接的方式,我在這裡就不在複述了!

dom操作之文件碎片

在日常的工作中,避免不了我們要想乙個元素中插入大量的動態元素,比如 在頁面中有乙個ul,我們隨著頁面的某乙個事件的觸發,需要向 box中插入大量的li,正常的寫法為 var oul document.queryselectorall box 0 for var i 0 i 1000 i var fr...

操作DOM文件

html dom載入過程及其處理 解析html結構 載入外部指令碼和樣式表檔案 解析並執行指令碼 構造html dom模型 載入等外部檔案 頁面載入完畢 一般可執行指令碼都放在頁面初始化事件處理函式中,這樣能保證文件完全載入完畢後才執行指令碼,即第六步時才執行指令碼 window.onload fu...

DOM文件,和表單操作

建立節點和插入節點 間接查詢元素 替換節點 轉殖節點 刪除節點 獲取表單 獲取input元素 獲取單選按鈕 獲取下拉選項 表單提交 文件節點 文件本身 整個文件 document 元素節點 所有的 html 元素 如 a div p 等 屬性節點 html 元素內的屬性 如 id href name...