找到某种类型的孩子
我的页面中有一个包含所有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()时可以用来区分它们的东西。
有可能实现我想要的吗？
我在jQuery中寻找纯JS替代方案：
var $form = $('form');
var $childButton = $form.find('button');回答 3
Stack Overflow用户
发布于 2016-06-02 01:01:15
元素具有querySelector/全的等效版本，因此可以从元素和文档中调用。因此，如果要在表单元素中寻找一个按钮，只需从表单元素调用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");演示
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>
Stack Overflow用户
发布于 2016-06-02 01:06:17
如果要选择第一个button后代，可以使用querySelector。
但是如果你想确保它是一个孩子，那么你可以使用[].find
[].find.call(form.children, function(child) {
return child.tagName.toLowerCase() === 'button';
});或者，一些浏览器支持:scope psudo类：
form.querySelector(":scope > button");希望它不会连同限定范围的样式表和@scope at-规则一起删除。
Stack Overflow用户
发布于 2016-06-02 02:29:50
你的问题还不太清楚。有一个document.forms集合，它是文档中按DOM顺序排列的所有表单，因此：
var firstForm = document.forms[0];会得到第一份表格。如果您的按钮有名称，则可以使用以下方法获得第一个表单中的名称为"Fred“的按钮：
var fred = document.forms[0].Fred;或第一种形式中的第一个按钮：
var firstButton = document.forms[0].querySelector('button');或第一种形式中的所有按钮都具有：
var firstButton = document.forms[0].querySelectorAll('button');诸若此类。请注意，表单控件可以使用form属性与窗体关联，但不能在窗体内。例如。
<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
}
}因此，如果您想涵盖每一种情况，您的代码需要非常通用。但是，如果您缩小了可能的场景，代码就会简单得多。
https://stackoverflow.com/questions/37581058
复制相似问题
腾讯云开发者
