JavaScript 文档片段 - JavaScript 教程

摘要：在本教程中，您将学习有关 JavaScript DocumentFragment 接口，以组合 DOM 节点并将它们更新到活动 DOM 树中。

JavaScript DocumentFragment 接口简介

DocumentFragment 接口是 Document 的轻量级版本，它存储文档结构的一部分，就像标准文档一样。但是，DocumentFragment 不属于活动 DOM 树的一部分。

如果您更改文档片段，它不会影响文档或产生任何性能影响。

通常，您使用 DocumentFragment 来组合 DOM 节点，并使用 appendChild() 或 insertBefore() 方法将其追加或插入到活动 DOM 树中。

要创建新的文档片段，请使用 DocumentFragment 构造函数，如下所示

let fragment = new DocumentFragment();Code language: JavaScript (javascript)

或者，您可以使用 Document 对象的 createDocumentFragment() 方法

let fragment = document.createDocumentFragment();Code language: JavaScript (javascript)

此 DocumentFragment 继承了其父级 Node 的方法，并且还实现了 ParentNode 接口的方法，例如 querySelector() 和 querySelectorAll()。

JavaScript DocumentFragment 示例

假设您有一个 <ul> 元素，其 id 为 language

<ul id="language"></ul>Code language: HTML, XML (xml)

以下代码创建了一个 <li> 元素（<li>）列表，并使用 DocumentFragment 将每个元素追加到 <ul> 元素。

let languages = ['JS', 'TypeScript', 'Elm', 'Dart','Scala'];

let langEl = document.querySelector('#language')

let fragment = new DocumentFragment();
languages.forEach((language) => {
    let li = document.createElement('li');
    li.innerHTML = language;
    fragment.appendChild(li);
})

langEl.appendChild(fragment);Code language: JavaScript (javascript)

工作原理

首先，使用 querySelector() 方法按其 id 选择 <ul> 元素。
其次，创建一个新的文档片段。
第三，对于 languages 数组中的每个元素，创建一个列表项元素，将列表项的 innerHTML 分配给 language，并将所有新创建的列表项追加到文档片段。
最后，将文档片段追加到 <ul> 元素。

整合在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DocumentFragment Demo</title>
</head>
<body>
    <ul id="language"></ul>

    <script>
        let languages = ['JS', 'TypeScript', 'Elm', 'Dart', 'Scala'];

        let langEl = document.querySelector('#language');
        let fragment = new DocumentFragment();

        languages.forEach((language) => {
            let li = document.createElement('li');
            li.innerHTML = language;
            fragment.appendChild(li);
        })

        langEl.appendChild(fragment);
    </script>

</body>
</html>Code language: HTML, XML (xml)

总结

使用 DocumentFragment 在将 DOM 节点更新到活动 DOM 树之前组合它们，以获得更好的性能。

测验

本教程是否有帮助？