DOM详解(四)：DOM添加/删除

原创

wx6409a261df68a 2023-03-15 09:32:46 ©著作权

文章标签 DOM添加/删除 ooc css 删除元素 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者wx6409a261df68a的原创作品，请联系作者获取转载授权，否则将追究法律责任

添加: 3步:
1. 创建新的空元素:
var a=document.createElement("a");
相当于: <a></a>
2. 设置元素的关键属性:
a.href="http://tmooc.cn"
a.innerHTML="go to tmooc";
相当于: <a href="http://tmooc.cn">go to tmooc</a>
3. 将元素添加到DOM树上:
3种:
1. 末尾追加: parent.appendChild(a)
2. 插入在一个现有元素之前:
parent.insertBefore(a,oldElem)
3. 替换现有元素: parent.replaceChild(a,oldElem)

***页面加载过程:
html->DOM Tree
↓
Render Tree->***layout->paint
↑
css->CSSRules
结论: 只要修改DOM树的内容，都会导致重新layout
解决: 优化: 尽量少的操作DOM树
1. 如果同时添加父元素和子元素时，都要先将子元素添加到父元素，再将父元素整体添加到DOM树一次即可
2. 如果同时添加多个平级元素时，都要用文档片段
文档片段: DocumentFragment
内存中临时存放多个平级元素的虚拟的临时父元素
何时: 如果同时添加多个平级元素时，都要先将平级元素添加到文档片段中。再将文档片段一次性添加到DOM树
如何:
1. 创建文档片段:
var frag=document.createDocumentFragment();
2. 将子元素添加到frag中: frag.appendChild(child)
3. 将frag添加到DOM树: parent.appendChild(frag)
frag将子元素添加到DOM树后，自动释放。