Javascript：无法在“节点”上执行“removeChild”：参数 1 的类型不是“节点”

Question

我正在尝试从其中一门课程中重新创建一些实践。 它即将从 UL 中删除一个 li-item 并将其附加到另一个 UL。

当我按以下方式编写代码时，所有工作都可以找到

var removeMeandAppendMe = function() {
    var parentLi = this.parentNode;
    var goneElement = incompleList.removeChild(parentLi);
    compleList.appendChild(goneElement);
};

var li = incompleList.getElementsByTagName('li');

for (var i = 0; i < incompleList.children.length; i++) {
    var link = li[i];
    var liCheckArray = link.getElementsByTagName('input');
    var liCheck = liCheckArray[0];
    liCheck.onchange = removeMeandAppendMe;
}

当我将代码更改为以下代码时，我收到错误“无法在‘节点’上执行‘removeChild’：参数 1 的类型不是‘节点’”。

function removeMeandAppendMe(fromList, toList) {
    var parentLi = this.parentNode;
    var goneElement = fromList.removeChild(parentLi);
    toList.appendChild(goneElement);
}

var li = incompleList.getElementsByTagName('li');

for (var i = 0; i < incompleList.children.length; i++) {
    var link = li[i];
    var liCheckArray = link.getElementsByTagName('input');
    var liCheck = liCheckArray[0];
    liCheck.onchange = removeMeandAppendMe(incompleList, compleList);
}

令我困扰的是，当我的 removeMeandAppendMe 函数没有参数且不使用参数时，代码运行良好。 谁能告诉我为什么以及我的错误在哪里？ 谢谢你。

（我知道这里讨论的模糊问题： Failed to execute 'removeChild' on 'Node' ）

Answer 1

首先，正如 Pointy 所提到的，您确实需要将您对RemoveMeandAppendMe(incompleList, compleList)调用包装在一个匿名函数中，以免过早地调用它。

考虑到这一点，您收到此错误是因为每个函数调用的情况下this的值是多少。 当调用RemoveMeandAppendMe() ， this是一个 HTMLInputElement 对象，但是当调用RemoveMeandAppendMe(incompleList, compleList) ， this是 Window 对象，因此this.parentNode是undefined （因此“不是类型 'Node'”，这就是为什么您正在看到该错误消息）。

这个问题有很多微妙之处： this指的是什么，以及如何处理不同的“函数”声明（ 这里有很多讨论）。 仅仅改变RemoveMeandAppendMe(incompleList, compleList)的声明方式也不能解决问题。

在某种程度上，您的问题归结为“为什么this指的是参数化函数调用的 Window 对象，而不是非参数化函数调用的 HTMLInputElement 对象？” 我相信在这种情况下，这是因为，当我们将参数化函数调用的调用包装在一个匿名函数中时（像这样： liCheck.onchange = function(){removeMeandAppendMe(incompleList, compleList);}; ）， removeMeandAppendMe有没有“本地”所有者，因此此函数的所有权默认为全局对象 Window（ 参考）。

要解决此问题，您可以将this传递给removeMeandAppendMe的调用，其中this将引用复选框，然后将其用作该参数化函数中的变量。 我已经把所有这些都放在你的小提琴中，可以通过评论/取消评论不同的东西来玩。 希望这有帮助。