Javascript 是否要添加document.body.appendChild，但要删除parentNode.removeChild？

我决定是时候用一种比过去更正式、更不随意的方式学习javascript了

所以我去developer.mozilla.org学习他们的教程

他们提供的第一个教学练习之一是在一篇题为“JavaScript第一次使用”的文章中，在这篇文章中，他们创建了一个简单的数字猜测游戏

在该游戏的代码中，该练习创建了一个名为setGameOver的函数，该函数创建了一个标记为“开始新游戏”的按钮

该按钮的代码为：

document.body.appendChild(resetButton);

接下来是另一个名为resetGame的函数，在该函数中，此按钮从页面中删除：

resetButton.parentNode.removeChild(resetButton);

我的问题是：如果添加按钮的代码是document.body.appendChild，为什么删除按钮的代码不是document.body.removeChild

为什么我们必须改用parentNode.removeChild

---

这就是那种让我发疯的编码教程。他们引入了一个新命令，但没有解释原因。实际上，他们只是说，“这就是你移除按钮的方式”，然后就这样离开了。啊

有很多方法可以删除元素并将其添加到页面中，这恰好是教程作者选择的演示方法。也许他们的意图是证明您实际上可以通过

resetButton.parentNode

访问

document.body

，我们永远不会知道

这里的要点是，您可以通过访问按钮的父节点来删除该按钮。在本例中，我们知道

document.body

是它的父节点（我们将按钮添加到该元素中，因此它必须是父节点），因此在本例中

resetButton.parentNode

和

document.body

引用同一对象，并且在功能上是等效的

var node1 = document.body;
node1.appendChild(resetButton);
// resetButton is now a child of node1 (and document.body, its the same object)
var node2 = resetButton.parentNode;
// we now know that node2 == node1 so we could do either of the following:
node1.removeChild(resetButton);
// -- or --
node2.removeChild(resetButton);

---

如果您有对特定html节点的引用（在本例中是，

resetButton

），但不知道父节点是什么，那么使用

.parentNode

查找父节点将是正确的方法。如果您确实知道父节点（因为您刚刚添加了它），那么您使用哪种方式并不重要。

您还可以使用

resetButton.remove（）

谁说您必须使用

parentNode.removeChild

，而不是

document.body.removeChild

？你试过了吗？我没试过。我试图从表面上理解这个教程。教程中说要使用parentNode.removeChild，我试图理解作者为什么选择使用parentNode.removeChild而不是document.body.removeChild。奇怪的是，他们会像教程中那样切换语法，尽管以上两种都是有效的等价物。选择使用哪一个实际上只是个人喜好，我猜教程的作者只是选择了随机混合。让你保持警觉；）在你还在学习的时候，事后猜测作者的意图听起来像是一种令人沮丧的消费教程的方式