当试图清除按钮输入时，Form.elements.filter不是一个函数

form.elements.filter is not a function when trying to weed out button inputs

本文关键字：函数 一个 filter elements 清除 按钮 输入 Form      更新时间：2023-09-26

form.elements返回如下数组:

[
     input#user_name, 
     input#user_email,
     button#submit,
     ...
]

我正在尝试过滤掉按钮输入

<button type="submit" className="btn" id="edit">Save</button>
form.elements.filter(i => (
    i.tagName !== 'BUTTON'
)).forEach(i => (// store stuff));

为什么这个不行?返回form.elements.filter is not a function

form.elements返回一个HTMLFormControlsCollection。

filter不存在作为HTMLFormControlsCollection的操作，以及其他一些数组方法，如forEach。

可以通过多种方式首先转换为数组。正如@DavidThomas所指出的，因为你正在使用箭头函数，你应该能够使用Array.from 

var els = Array.from(form.elements);
// Otherwise, use [].slice.call(form.elements)

现在可以正常进行任何数组操作，包括forEach, filter等

els = els.filter(el => (
    el.tagName !== 'BUTTON'
))

下面是一个完整的例子:

var form = document.querySelector('form');
var els = Array.from(form.elements);
els = els.filter(el => {
  return (
    el.tagName.toLowerCase() !== 'button' &&
    el.getAttribute('type') !== 'button'
  );
});
els.forEach(el => {
  console.log(el);
});
<form>
  <input type="text" value="1">
  <input type="button" value="Input Button">
  <textarea>Awesome Content</textarea>
  <button>Another Button</button>
  <button type="submit" className="btn" id="edit">Save</button>
</form>

如果性能成为一个问题，请记住您可以"合并"。利用HTMLFormControlsCollection是"类数组":

这一事实，将.filter调用转换为Array.from。

var form = document.querySelector('form');
var els_coll = form.elements;
els_array = Array.prototype.filter.call(els_coll, el => {
  return (
    el.tagName.toLowerCase() !== 'button' &&
    el.getAttribute('type') !== 'button'
  );
});
els_array.forEach(el => {
  console.log(el);
});
<form>
  <input type="text" value="1">
  <input type="button" value="Input Button">
  <textarea>Awesome Content</textarea>
  <button>Another Button</button>
  <button type="submit" className="btn" id="edit">Save</button>
</form>

相关文章：