如何通过名称获取 js 中的输入对象 - Javascript

在开发 JavaScript 应用程序时，常常需要获取输入框、下拉菜单等 HTML 元素的值。为了避免使用不必要的全局变量，我们通常会将这些元素保存在 JS 对象中，便于管理和访问。但是当需要通过名称获取某个特定的输入对象时，有什么方法能够做到呢？以下是一些解决方案。

使用 document.getElementsByName()

document.getElementsByName() 是 JavaScript 中用于查询特定名称的元素对象的函数。该函数返回一个 Node 对象数组，并支持类似 CSS 的选择器。

const inputElements = document.getElementsByName('myInput');
const myInput = inputElements[0];
const inputValue = myInput.value;

在上面的示例中，我们使用 getElementsByName() 函数获取了所有名称为 myInput 的文本输入框，并将结果数组存储在 inputElements 中。由于我们只需要查询一个输入框，因此我们可以使用数组的第一个元素 inputElements[0] 来获取我们需要的实际输入框。最后我们通过 myInput.value 获取该输入框的值。

注意：getElementsByName() 函数返回的是一个 NodeList（节点列表），而不是数组，因此不能使用数组的任何方法。

使用一个 JavaScript 对象来缓存所有名称

为了更方便地管理和访问输入对象，我们可以将它们缓存到一个 JavaScript 对象中，并使用名称作为属性名。下面是一个示例：

const inputs = {
  myInput1: document.getElementById('myInput1'),
  myInput2: document.getElementById('myInput2')
};

const myInput1 = inputs.myInput1;
const inputValue1 = myInput1.value;

const myInput2 = inputs.myInput2;
const inputValue2 = myInput2.value;

在上面的示例中，我们使用 getElementById() 函数获取了两个不同的文本输入框，并将它们缓存到了 inputs 对象中。该对象使用输入框名称作为属性名。我们可以通过对象属性来访问它们的值。

使用 ES6 中的解构语法

在 ES6 中，我们可以使用解构语法来方便地获取输入对象。下面是一个示例：

const { myInput1, myInput2 } = {
  myInput1: document.getElementById('myInput1'),
  myInput2: document.getElementById('myInput2')
};

const inputValue1 = myInput1.value;
const inputValue2 = myInput2.value;

在上面的示例中，我们使用对象解构语法将 myInput1 和 myInput2 直接从对象中提取出来，并将它们设置为常量。这个技巧可以减少代码的数量并提高可读性。

结论

获取输入对象的方法有很多，我们需要根据具体的场景和需求来选择最适合的方法。在实践中，我们需要考虑代码的可读性、可维护性和性能等方面。