问找到某种类型的孩子
EN

Stack Overflow用户

提问于 2016-06-01 16:58:08

回答 3查看 3.2K关注 0票数 2

我的页面中有一个包含所有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');

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-06-01 17: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>

票数 6

Stack Overflow用户

发布于 2016-06-01 17:06:17

如果要选择第一个button后代，可以使用querySelector。

但是如果你想确保它是一个孩子，那么你可以使用[].find

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

或者，一些浏览器支持:scope psudo类：

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

希望它不会连同限定范围的样式表和@scope at-规则一起删除。

票数 0

Stack Overflow用户

发布于 2016-06-01 18: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
  }
}