Question

我正在学习HTML DOM模型，我遇到了问题。我无法理解createDocumentFragment（）方法在以下代码中是如何工作的。

HTML CODE：

<!DOCTYPE html>
<html>
<body>

<ul><li>Coffee</li><li>Tea</li></ul>

<button onclick="myFunction()">Try it</button>

<script>

function myFunction()
{
var d=document.createDocumentFragment();
d.appendChild(document.getElementsByTagName("LI")[0]);
d.childNodes[0].childNodes[0].nodeValue="Milk";
document.getElementsByTagName("UL")[0].appendChild(d);
};

</script>

</body>
</html>

据我所知，createDocumentFragment（）方法创建了一个虚构的Node对象，当你想要提取文档的某些部分时，该对象很有用。appendChild（）方法将节点附加到节点的最后一个子节点。但是以下是什么意味着：

 d.childNodes[0].childNodes[0].nodeValue="Milk";

不应该是d.childNodes[0].nodeValue="Milk";吗？请有人能给我一个清楚的解释，说明上述DOM模型是如何工作的！

Answer 1

<li>内部有一个文本节点，代表字符串“Coffee”，这就是用“Milk”代替的内容。片段的第一个子节点是<li>，其第一个子节点是文本节点。

createDocumentFragment（）方法如何工作？

1 个答案: