javascript - 如何将 HTML 元素作为参数传递给 Javascript 函数？

Question

我有一个聊天窗口，它有一个关闭按钮(输入类型='图像')和点击我想从父节点删除聊天窗口，我使用这段代码

closeBtn.setAttribute("onclick", "return closeContainer(cc" + friendId + ");");

请注意，此按钮是通过 javascipt 创建的，cc223423432(比方说)将是聊天窗口的 ID

这是我删除它的代码

function closeContainer(ccId) {
    var x = ccId;
    x.parentNode.removeChild(x);
    //..........
}

现在在 IE8 和 Chrome 中它发现传递的参数为 HTMLDIV 并且工作正常但在 firefox 中它给出错误 cc223423432 is undefined知道为什么吗？？？

我知道我总是可以做一个 document.getElementByID 然后删除它，但是如果我遗漏了什么请告诉我

Answer 1

closeBtn.setAttribute("onclick", "return closeContainer(cc" + friendId + ");");

不要使用 setAttribute 来设置事件处理程序...实际上根本不要在 HTML 文档上使用 setAttribute。 IE6-7 中存在影响许多属性的错误，包括事件处理程序。始终使用“DOM Level 2 HTML”直接属性代替；它们很可靠，使您的代码更易于阅读。

放弃从字符串创建函数的尝试(这几乎总是错误的)，只写:

closeBtn.onclick= function() {
    return closeContainer(document.getElementById('cc'+friendId));
};

甚至只是将 closeContainer 功能内联:

closeBtn.onclick= function() {
    var el= document.getElementById('cc'+friendId);
    el.parentNode.removeChild(el);
    return false;
};

in firefox it give an error cc223423432 is undefined any idea why???

因为 IE 使每个元素都带有 id (或者在某些情况下 name )全局变量( window 的属性)。所以在 IE 中你可以只说 cc223423432并获取对您的对象的引用。

不过，这确实是一件很糟糕的事情。除了在其他浏览器中不存在之外，它还会使全局命名空间变得杂乱无章，并且一旦您确实拥有与 id 同名的变量，它就会出错。在您的页面上。

使用 getElementById 获取对 id 节点的引用，如上所述。这在任何地方都有效，而且是明确的。