Question

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

Answer 1

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>

在尝试清除按钮输入时，form.elements.filter不是一个函数

1 个答案: