Javascript：使用querySelectorAll查找符合特定条件的所有输入元素

问题描述

我正在创建一个form.html页面 并且我试图在form.js文件中使用Javascript获取带有用户应使用 querySelectorAll 输入的5个字段的数组，但是我的代码无法正常工作。

我在做什么错？我想要我的JS代码要做的是找到所有符合以下条件的字段：

1. 是输入元素
2. 以“ txt”开头
3. 是type =“ txt”或type =“ password”

window.addEventListener('DOMContentLoaded',function() {
  let divMain = document.getElementById("divMain");
  let inputElements = divMain.getElementById("frmRegister").querySelectorAll(input[id ^= txt][type = "text"],input[id ^= txt][type = "password"]);
  console.log(inputElements.length);
});

<h2 class="container">Form/jQuery</h2>
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>

解决方法

您使选择器过于复杂，缺少一些引号

 let inputElements = document.getElementById("frmRegister")
    .querySelectorAll('input[id^=txt][type="text"],input[id^=txt][type="password"]');

但是使用过滤器会更容易：

window.addEventListener('DOMContentLoaded',function() {
  let inputElements = [...document.getElementById("frmRegister").querySelectorAll('input[id ^= txt]')]
    .filter(elem => elem.type === "text" || elem.type==="password");

  console.log(inputElements);
  // or
  inputElements.forEach(elem => console.log(elem.id,elem.type)); 
});

<h2 class="container">Form/jQuery</h2>
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>

,

这是

window.addEventListener('DOMContentLoaded',function() {
  let inputElements = document.getElementById("frmRegister").querySelectorAll('input[id^=txt][type="text"],input[id^=txt][type="password"]');
  console.log(inputElements)
});

<h2 class="container">Form/jQuery</h2>
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>

所有输入

window.addEventListener('DOMContentLoaded',input[id^=txt][type="password"]');
  console.log(inputElements.length)
});

<h2 class="container">Form/jQuery</h2>
<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>

,

getElementById是文档对象的一部分，而不是元素对象。

您的代码稍有改动。

(function() {
  let divMain = document.getElementById("divMain");
  let inputElements = divMain.querySelector("#frmRegister").querySelectorAll('input[id^="txt"][type="text"],input[id^="txt"][type="password"]');
  console.log(inputElements);
})();

<div class="container" id="divMain">
  <form action="form.html" method="get" name="frmRegister" id="frmRegister">
    <table>
      <tr>
        <td>Login</td>
        <td><input required type="text" name="field1" id="txtfield1" />&nbsp;<span id="spnLogin"></span></td>
      </tr>
      <tr>
        <td>Password</td>
        <td><input type="password" id="txtPassword">&nbsp;<span id="spnPasswordComplexity"></span></td>
      </tr>
      <tr>
        <td>Confirm Password</td>
        <td><input type="password" id="txtConfirmPassword">&nbsp;<span id="spnPasswordCompare"></span></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input type="text" id="txtEmail">&nbsp;<span id="spnEmail"></span></td>
      </tr>
      <tr>
        <td>Confirm Email</td>
        <td><input type="text" id="txtConfirmEmail">&nbsp;<span id="spnEmailCompare"></span></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" id="btnRegister" value="Register"></td>
      </tr>
    </table>
  </form>
</div>