ボタン入力を取り除くしようとしたときform.elements.filterは関数ではありません

Question

form.elementsは、私は、ボタン入力

<button type="submit" className="btn" id="edit">Save</button> 

form.elements.filter(i => (
    i.tagName !== 'BUTTON' 
)).forEach(i => (// store stuff)); 

をフィルタリングしようとしているので...

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

ような配列を返します。

なぜこれは機能しませんか？ form.elements.filter is not a function

Answer 1

form.elementsは、HTMLFormControlsCollectionを返します。

filterは、forEachのような他の配列メソッドとともに、HTMLFormControlsCollectionの操作として存在しません。

まず、さまざまな方法で配列に変換できます。あなたは、矢印の機能を使用しているので、あなたがArray.from

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

を使用することができるはず、@DavidThomasで指摘したように今、あなたは、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>