了解 event.target.elements

如何解决了解 event.target.elements

我正在使用 javascript（React，但我认为这不是 React 特有的）来处理表单提交。我的任何元素都不受控制，我想保持这种状态。我可能事先并不确切知道表单元素是什么，有多少个等等。我只想抓住表单中的任何内容并将其发送到任何需要去的地方。

我正在事件处理程序中进行一些日志记录，以便我可以检查 event.target.elements，这有点令人困惑。它似乎同时是一个索引数组和一个对象，每个表单元素都有一个数字条目和一个命名条目。它的 length 属性等于数字条目数的长度（忽略命名条目），但如果我尝试直接在其上使用 .forEach，则会收到错误 {{1} }.如果我使用 event.target.elements.forEach is not a function 对其进行循环，则会记录数字和命名条目。但如果我使用 Object.entries 循环遍历它，我只会得到数字条目。

我只想知道到底发生了什么。如果 lodash 不是数组，为什么它有 event.target.elements 属性？如果是数组，为什么不能直接在上面使用普通的length？

我的表单提交事件处理程序看起来像这样，用于测试/学习目的：

forEach

输出如下，注意let handleSubmit = async( event ) => { event.preventDefault(); console.log("event.target.elements",event.target.elements); console.log("event.target.elements",typeof event.target.elements); Object.entries(event.target.elements).forEach(([name,input]) => { console.log("name",name); console.log("input",input); }); console.log("------"); _.forEach(event.target.elements,(el,key)=>{ console.log("key",key); console.log("name",el.name); console.log("value",el.value); }); }; // handleSubmit 循环执行四次，而Object.entries循环执行两次

lodash

解决方法

实际上，答案就在您的代码示例中：它是一个 HTMLFormControlsCollection (MDN entry here)。

在 JS 中，不仅有 Object、Array、Map 和 Set（好吧，WeakMap 和 WeakSet），而且还有其他类型（集合），例如 HTMLCollection 的“家庭”。

这些都有自己的专长，可用于不同的用例，但它们可以通过一些迭代技术用作Array：

const inputForm = document.getElementById("input-form")

inputForm.addEventListener('submit',(e) => {
  e.preventDefault()

  const el = e.target.elements
  console.log("el.toString():",el.toString())
  console.log("instanceof HTMLFormControlsCollection:",el instanceof HTMLFormControlsCollection) // expected: true
  console.log("instanceof Array:",el instanceof Array) // expected: false

  // iteration #1
  // using map() on collections
  const mapped = Array.prototype.map.call(el,(ele) => ele)
  console.log("mapped:",mapped)

  // iteration #2
  // logs the elements
  for (let ele of el) {
    console.log("for...of:",ele)
  }

  // iteration #3
  // logs the keys of the HTMLFormControlsCollection
  for (let ele in el) {
    console.log("for...in:",ele)
  }

  // iteration #4
  const spread = [...el]
  console.log("spread:",spread)
});

<form id="input-form">
  <input type="text" />
  <input type="text" />
  <button type="submit">SUBMIT</button>
</form>