特定のタイプの子供を見つける

Question

私のページにはすべてformsの配列があります。私はすべてのフォームを反復して、ボタンを見つけたいと思っています。どのように私はこれを達成することができますJavascriptは単独で、ライブラリなしで？

は、ここに私のJSコードです：

var forms = document.querySelectorAll('form'); 

for(var i = 0; i < forms.length; i++;){ 
    var form = forms[i]; 
    form.addEventListener('submit', validateForm); 
} 

function validateForm(e){ 
    e.preventDefault();  
    var button = ?; // I want to get the button that is a child of this form 
} 

私は、フォームの子であるすべてのボタンを取得するためにこれを使用することができます知っている：

var buttons = document.querySelectorAll('form button'); 

しかし、どのように、私はちょうど1を得ることができますの子ですこのボタンフォーム？

私はこの質問を何度も聞いたことがありますが、いつも特定された親の子供たちを見つけることができました。具体的にはidなどです。どのくらい多くのフォームがページにあるかわからないし、私は湿っているかどうかをコントロールしていないか、などの固有のものを持っていないか、querySelectorAll()を使用して区別するために使用できるものがあります。

私が望むものを達成することは可能ですか？

私はjQueryのでは、この純粋なJSの代替を探しています：

var $form = $('form'); 
var $childButton = $form.find('button'); 

Answer 1

ElementはquerySelector/Allの同等のバージョンを持っているので、要素だけでなく、文書から呼び出すことができます。ですから、フォーム要素内のボタンを探している場合は、最初buttonを選択したい場合は、あなただけのデモ

let forms = document.querySelectorAll("form"); 
 
[].forEach.call(forms,form=>{ 
 
    form.querySelector("button").innerText += " - Modified"; 
 
});

<form> 
 
    <button>A button</button><br> 
 
    <input><input> 
 
</form> 
 
<form><br><br> 
 
    <button>B button</button><br> 
 
    <input><input><br> 
 
    <button>C button</button> 
 
</form><br><br> 
 
<form> 
 
    <button>D button</button><br> 
 
    <input><input> 
 
</form>

Answer 2

フォーム要素から

var form = document.querySelector("#SomeForm"); 
//Will find the first button in the form 
var someBtn = form.querySelector("button"); 
//Will find all buttons in the form. 
var someBtns = form.querySelectorAll("button"); 

をquerySelectorを呼び出すことができます子孫の場合はquerySelectorを使用できます。

しかし、あなたは、それは子供のことを確認したい場合は、[].findを使用することができます。

[].find.call(form.children, function(child) { 
    return child.tagName.toLowerCase() === 'button'; 
}); 

また、一部のブラウザでは:scope psudoクラスをサポートしています。

form.querySelector(":scope > button"); 

うまくいけば、それは勝ちましたスコープ付きスタイルシートと一緒に削除し、@scope at-ruleで削除してください。

Answer 3

あなたの質問は本当に明確ではありません。 DOMのには、ドキュメント内のすべてのフォームでdocument.formsコレクションがそう、あります：

var firstForm = document.forms[0]; 

は、最初の形式を取得します。あなたのボタンが名前を持っている場合は、使用して最初の形式で名前「フレッド」とのボタンを取得することができます。

var fred = document.forms[0].Fred; 

かと最初の形で最初のボタン：

var firstButton = document.forms[0].querySelector('button'); 

またはすべてのボタンを

などとなります。フォームコントロールはフォームアトリビュートを使用するフォームに関連付けることができますが、フォーム内には配置できません。例えば。この場合

<form id="foo"> 
    <!-- stuff in the form --> 
</form> 
<button type="submit" for="foo">Submit the form</button> 

querySelector構文は失敗していますが、フォームの 要素をループに収集が必要になる場合がありますので、フォームのプロパティへのアクセスは、しません：あなたがしたいのであれば

for var i=0, firstButton; i<firstForm.elements.length; i++) { 
    if (firstForm.elements[i].tagName.toLowerCase() == 'button') { 
    // This is the first button associated with the form, 
    // even if not actually in the form 
    } 
} 

をすべての場合、コードは非常に一般的である必要があります。しかし、想定されるシナリオを絞り込むと、コードは非常に簡単になります。