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

Question

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

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

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

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

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

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

Answer 1

您可以使用查询选择器。

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

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

你也可以先获取div或form，然后在其上使用querySelectorAll获取它所包含的所有inputs、selects和textareas（不仅仅是直系子级） )。

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

Answer 2

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

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

<form>
  <input type="text" value="name">
  <textarea>text</textarea>
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</form>

Answer 3

[].forEach.call( document.getElementById('parentobject').querySelectorAll( 'input[type="text"], input[type="hidden"], input[type="radio"], input[type="checkbox"], select, textarea' ), function( elem ) { 
    console.log( elem.id);
} );

<div id="parentobject">
<input id="textinput" type="text" value="xyz" />
<input id="gobutton" type="button" value="go" />
<input id="acheckedbox" type="checkbox" checked />
</div>

对于在queryselectorAll过滤器中指定类型的指定元素对象（parentobject）中找到的每个元素，指定的内联函数将以其为目标运行，并将元素的id输出到控制台。

上面的代码应用于下面的 html 会输出每个匹配元素的 id：

textinput
acheckedbox