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

Posted 2023-02-22

【中文标题】如何仅使用 javascript 获取特定 div/form 的所有子输入？

【英文标题】：How to grab all child inputs of a specifc div/form using just javascript?

【发布时间】：2019-01-08 04:18:39

【问题描述】：

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

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

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

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

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

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

【问题讨论】：

啊我不知道querySelectorAll方法可以有多个参数谢谢。

如果你在那些表单元素中只有div，你可以使用:not()，例如element.querySelectorAll('*:not(div)')

@QwertyQwerts querySelectorAll 在例如在你的情况下form

【参考方案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>

【讨论】：

document.querySelectorAll('#divID > input, #divID > select'); 应该更好

@QwertyQwerts 好吧，querySelectorAll("input select textarea") 的 NIckHTTPS 想法行不通，因为那不是如何做到的

@QwertyQwerts 它选择#divID 的所有直接子代inputs 或selects。

@QwertyQwerts 我提供了第二种解决方案，只要div 包含它们（不一定是它们的直接父级），它就会选择所有input、select 和textarea 元素.

@DanielBeck 猜猜看：)

【参考方案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>

【参考方案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

【讨论】：

如果你能添加一些关于代码的解释会很好