将 HTML 元素作为参数传递给函数与使用 getElementById 获取相同元素答案

【问题标题】：passing HTML element as an arguvment to a function vs. using getElementById to get same element将 HTML 元素作为参数传递给函数与使用 getElementById 获取相同元素
【发布时间】：2013-02-14 20:08:54
【问题描述】：

在定义函数时，您如何决定该函数是获取作为参数传递的 HTML 元素还是使用 getElementById？一种方式比另一种更快吗？我知道将事物作为参数传递会增加可重用性，但有时很难确定函数是否会在另一段代码中使用。

只是为了澄清而不是使用getElementById 我会有类似<input type="text" name="colour" onkeyup="myFunction(this.value)" /> 的东西

【问题讨论】：

标签： javascript function design-patterns getelementbyid

【解决方案1】：

从功能上讲，如果在调用函数之前调用 getElementById 并传递结果，或者从函数内部传递结果，这并没有太大区别。通过将元素传递给函数有一点额外的灵活性，因为您还可以使用其他选择器（除了 id）来查找您的元素。

【讨论】：

我从未见过从函数外部调用 getElementById，你能举个例子说明如何做到这一点吗？你在说输入框本身是对的，还是什么？
您实际上是在获取您的元素，然后将其传递给函数。这可以像这样在线完成：var myFunction(element){ // do something; }; myFunction(getElementById('myElementId'));。或者您可以将其保存为 var 并将 var 传递给您的函数； var myElement = getElementById('myElementId'); myFunction(myElement);
如果是从输入字段调用，第二种方式是否比 myFunction(this.value) 更好？
如果this.value 是一个选择器ID，那么这是一个分层函数的问题。输入字段正在调用一个函数，该函数随后将调用myFunction()。它与第二个示例基本相同。只是您在哪里拨打getElementById() 的问题。实际上，它们有非常微妙的不同，但表现大致相同。如果您想从其他地方以及现场调用myFunction()，我只建议将其分离为两个单独的分层函数，例如对不同的事件做出反应。
总而言之，getElementById() 总是在某个级别被调用以获取元素的值。唯一的区别是何时/如何调用它？

【解决方案2】：

为灵活起见，您可以制作可以采用以下任一功能的函数：

 function whatever( element ) {
   if (typeof element === 'string')
     element = document.getElementById( element );
   // ... do stuff ...
 }

【讨论】：

如果可以的话，我会给你加两个。这是一个很好的解决方案。在某些情况下，任何一个都可能是有益的。如果没有具体细节，这看起来非常接近理想。
@dotsamuelswan 如果需要，它可以变得更漂亮。这只是概念验证:-)

【解决方案3】：

始终传递对象，而不是 ID。传递对象就像给你一本书。传递 ID 是向您显示一本书的名称，然后将这本书放回图书馆并要求您找到它。

没有理由每次都搜索元素。

【讨论】：