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()时区分它们的内容。< / p>

有可能实现我想要的目标吗？

我在jQuery中寻找纯JS的替代方法：

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

Answer 1

Element具有等效版本的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");

演示

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-class：

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

希望它不会与作用域样式表和@scope at-rule一起删除。

Answer 3

你的问题并不是很清楚。有一个 document.forms 集合，它是DOM顺序的文档中的所有表单，因此：

var firstForm = document.forms[0];

将获得第一张表格。如果您的按钮有名称，您可以获得名称为＆＃34; Fred＆＃34;在第一种形式中使用：

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

或第一个表单中的第一个按钮：

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

或第一个表单中的所有按钮：

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

等等。请注意，表单控件可以使用表单属性与表单关联，但不能在表单内部。 E.g。

<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
  }
}

因此，如果您想要涵盖每个案例，那么您的代码必须非常通用。但是如果你缩小可能的场景，代码就会非常简单。

找到某种类型的孩子

3 个答案: