首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >找到某种类型的孩子

找到某种类型的孩子
EN

Stack Overflow用户
提问于 2016-06-02 00:58:08
回答 3查看 3.2K关注 0票数 2

我的页面中有一个包含所有forms的数组。我想遍历所有的表单,并在它们中找到按钮。如何在没有任何库的情况下,仅在Javascript中实现这一点?

这是我的JS代码:

代码语言:javascript
代码运行次数:0
运行
复制
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
}

我知道我可以使用它来获取窗体的所有子元素:

代码语言:javascript
代码运行次数:0
运行
复制
var buttons = document.querySelectorAll('form button');

但是,我如何才能得到一个按钮,它是这个表单的子程序?

我见过这个问题问了很多次,但总是找到父母的孩子,有一个特定的id或类似的东西。我不知道页面中会有多少个表单,我也无法控制它们是否具有唯一的id或任何其他在使用querySelectorAll()时可以用来区分它们的东西。

有可能实现我想要的吗?

我在jQuery中寻找纯JS替代方案:

代码语言:javascript
代码运行次数:0
运行
复制
var $form = $('form');
var $childButton = $form.find('button');
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-06-02 01:01:15

元素具有querySelector/的等效版本,因此可以从元素和文档中调用。因此,如果要在表单元素中寻找一个按钮,只需从表单元素调用querySelector即可。

代码语言:javascript
代码运行次数:0
运行
复制
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");

演示

代码语言:javascript
代码运行次数:0
运行
复制
let forms = document.querySelectorAll("form");
[].forEach.call(forms,form=>{
   form.querySelector("button").innerText += " - Modified";
});
代码语言:javascript
代码运行次数:0
运行
复制
<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
EN

Stack Overflow用户

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

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

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

代码语言:javascript
代码运行次数:0
运行
复制
[].find.call(form.children, function(child) {
  return child.tagName.toLowerCase() === 'button';
});

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

代码语言:javascript
代码运行次数:0
运行
复制
form.querySelector(":scope > button");

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

票数 0
EN

Stack Overflow用户

发布于 2016-06-02 02:29:50

你的问题还不太清楚。有一个document.forms集合,它是文档中按DOM顺序排列的所有表单,因此:

代码语言:javascript
代码运行次数:0
运行
复制
var firstForm = document.forms[0];

会得到第一份表格。如果您的按钮有名称,则可以使用以下方法获得第一个表单中的名称为"Fred“的按钮:

代码语言:javascript
代码运行次数:0
运行
复制
var fred = document.forms[0].Fred;

或第一种形式中的第一个按钮:

代码语言:javascript
代码运行次数:0
运行
复制
var firstButton = document.forms[0].querySelector('button');

或第一种形式中的所有按钮都具有:

代码语言:javascript
代码运行次数:0
运行
复制
var firstButton = document.forms[0].querySelectorAll('button');

诸若此类。请注意,表单控件可以使用form属性与窗体关联,但不能在窗体内。例如。

代码语言:javascript
代码运行次数:0
运行
复制
<form id="foo">
  <!--  stuff in the form -->
</form>
<button type="submit" for="foo">Submit the form</button>

在这种情况下,querySelector语法失败,但表单属性访问没有失败,因此您可能需要遍历表单的元素集合:

代码语言:javascript
代码运行次数:0
运行
复制
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
  }
}

因此,如果您想涵盖每一种情况,您的代码需要非常通用。但是,如果您缩小了可能的场景,代码就会简单得多。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37581058

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档