如何仅使用 javascript 获取特定 div/form 的所有子输入？

Question

我在这里看到了类似的帖子，但是我想使用 javascript 做类似的事情。基本上有一种方法可以在某个容器（例如 div 或表单）中获取所有用户输入

<form>
<div>
   <text>
</div>
<div>
  <textarea>
</div>    
 <div>
   <select>
</div>
</form>

一个例子是抓取文本、文本区域、选择和其他形式的用户输入。我看到了类似的东西

var elements = document.myform.getElementsByTagName("input")

但它不适用于选择。我知道我可能只有一个重复的方法来尝试查找（“选择”）但是如果表单必须保持用户输入信息的顺序怎么办。

编辑：感谢您的所有答复。到目前为止提到的所有方法是否仅在输入是直接后代时才有效，还是有其他方法？

Answer 1

您可以使用查询选择器。

document.querySelectorAll('#divID input, #divID select, #divID textarea');
//selects all elements contained by #divId that are input, textarea, or select elements

document.querySelectorAll('#divID input, #divID select, #divID textarea');
//selects all elements contained by #divId that are input, textarea, or select elements

您也可以先获取divor form，然后使用querySelectorAll它来获取它包含的所有inputs、selects 和textareas（不仅仅是直接子级）。

<div id="myDiv">
<form>
<input type="text">
<select>
<option>1</option>
</select>
<textarea>Text...</textarea>
<div>
 <span>
     <select id="nestedSelect"></select>
 </span>
</div>
</form>
</div>
<script>
var inputs = document.querySelectorAll('#myDiv input, #myDiv select, #myDiv textarea');
for(let i = 0; i < inputs.length; i++){
  console.log(inputs[i]);
}
</script>

Answer 2

使用.querySelectorAll指定由 a 分隔的每个元素来,从表单中进行选择：

var elements = form.querySelectorAll('input, textarea, select');

var elements = form.querySelectorAll('input, textarea, select');

var form = document.querySelector('form');
var elements = form.querySelectorAll('input, textarea, select');

elements.forEach(function(element) {
  // access each element here
  console.log(element);
});

input, textarea, select {
  display: block;
}