js 文档片段 DocumentFragment

2024-05-14 18:28:04
开发
16

DocumentFragment 作为一个轻量版的 Document 使用，就像标准的 document 一样，存储由节点（nodes）组成的文档结构。与 document 相比，最大的区别是它不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会对性能产生影响。

如果频繁改动 document 树，页面加载会变慢，使用虚拟dom(DocumentFragment) 来记录全部的元素节点，html 只渲染一部分元素节点，这样可以减轻html的加载。

属性：

childElementCount	返回所有属于 DocumentFragment 的 Element 类型的子对象。
children	返回一个实时的 HTMLCollection，其中包含了所有属于 DocumentFragment 的 Element 类型的子对象。
firstElementChild	返回 DocumentFragment 的第一个 Element 类型的子对象，如果没有则返回 null。
lastElementChild	返回 DocumentFragment 的最后一个 Element 类型的子对象，如果没有则返回 null。

方法：

append()	在文档片段的最后一个子对象后插入一组 Node 或字符串对象。
prepend()	在文档片段的第一个元素前插入一组 Node 或字符串对象。
querySelector()	返回在 DocumentFragment 中以文档顺序排列的第一个符合指定选择器的 Element 节点。
querySelectorAll()	返回在 DocumentFragment 中所有的符合指定选择器的 Element 节点组成的 NodeList 数组。
getElementById()	返回在 DocumentFragment 中以文档顺序排列的第一个符合指定 ID 选择器的 Element 节点。与 Document.getElementById() 作用相同。

参考资料：

DocumentFragment - Web APIs | MDN (mozilla.org)
HTML DOM createDocumentFragment() 方法 | 菜鸟教程 (runoob.com)

HTML DOM Document createDocumentFragment() 方法 (w3school.com.cn)

原文地址:https://blog.csdn.net/qq_52792889/article/details/138811031 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.suanlizi.com/kf/1790328216515383296.html 如若内容造成侵权/违法违规/事实不符，请联系《酸梨子》网邮箱：1419361763@qq.com进行投诉反馈，一经查实，立即删除！

阅读全部

js 文档片段 DocumentFragment

属性：

方法：

参考资料：

相关推荐

最近更新

热门阅读