Find children of a certain type
<p>I have an array of all the <code>forms</code> in my page. I want to iterate through all the forms, and find the buttons in them. How can I achieve this in <strong>Javascript alone, without any libraries?</strong></p>

<p>Here's my JS code : </p>

<pre><code>var forms = document.querySelectorAll('form');

for(var i = 0; i &lt; 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
}
</code></pre>

<p>I know that I can use this to get all the buttons that are children of a form : </p>

<pre><code>var buttons = document.querySelectorAll('form button');
</code></pre>

<p>But how can I get just one button that is a  children of <strong>this</strong> form?</p>

<p>I've seen this question asked multiple times, but it was always to find the children of a parent that was known, with a specific <code>id</code> or something like that. I have no idea how many forms there will be in the page, and I have no control on wether or not they have unique <code>id</code> or anything else that could be used to differentiate them when using <code>querySelectorAll()</code>.</p>

<p>Is it possible to achieve what I want?</p>

<p>I'm looking for the pure JS alternative to this in jQuery : </p>

<pre><code>var $form = $('form');
var $childButton = $form.find('button');
</code></pre>