Найти детей определенного типа

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'); 

Но как я могу получить только один кнопка, которая является дочерью этой формы?

Я видел этот вопрос несколько раз, но он всегда должен был найти детей родителя, который был известен, с определенным id или что-то в этом роде. Я понятия не имею, сколько форм будет на этой странице, и у меня нет контроля над ними или нет, у них есть уникальный id или что-нибудь еще, что можно было бы использовать для их дифференциации при использовании querySelectorAll().

Можно ли достичь того, чего я хочу?

Я ищу чистого JS альтернативы этому в JQuery:

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

Answer 1

Элемент имеет эквивалентные версии querySelector/All и поэтому может быть вызвана из элементов, а также документа. Так что если вы ищете кнопку внутри элемента формы вы можете просто позвонить querySelector из элемента формы

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"); 

Demo

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

Если вы хотите, чтобы выбрать первый button потомок, вы можете использовать querySelector.

Но если вы хотите, чтобы убедиться, что это ребенок, то вы можете использовать [].find:

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

Кроме того, некоторые браузеры поддерживают :scope psudo-класс:

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

Надеюсь, он выиграл» t удаляться вместе с таблицами стилей и @scope при правиле.

Answer 3

Ваш вопрос не совсем ясен. Существует document.forms коллекция, которая является все формы в документе в DOM порядке, так:

var firstForm = document.forms[0]; 

получит первую форму.Если кнопки имеют имена, вы можете получить кнопку с именем «Фред» в первой форме, используя:

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

или первая кнопка в первой форме с:

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

Или все кнопки в первом виде:

var firstButton = document.forms[0].querySelectorAll('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 
    } 
} 

Так что, если вы хотите обложка всякий случай, ваш код должен быть очень общим. Но если сузить вероятные сценарии, код намного проще.