如何使用 Javascript DOM 从具有多个表单的页面获取具有输入类型密码的表单？答案

【问题标题】：How to get the form with input type password from a page with multiple forms using Javascript DOM?如何使用 Javascript DOM 从具有多个表单的页面获取具有输入类型密码的表单？
【发布时间】：2021-02-26 18:25:02
【问题描述】：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Form.html</title>
    <style type="text/css">
      body {
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <form id="form1">
      <div id="fullnameIDdiv">
        Full Name: <input type="text" name="fullname" /><br />
      </div>
      <div id="usernameIDdiv">
        Username: <input type="text" name="username" /><br />
      </div>
      Password: <input type="password" name="password" /><br />
      <input type="submit" value="Submit" />
    </form>

    <form id="form2">
      <div id="firstName">
        Full Name: <input type="text" name="fname" /><br />
      </div>
      <div id="lastName">
        Username: <input type="text" name="lname" /><br />
      </div>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

例如，在这个页面中有两种形式。我想获得具有inputtype = password 的表单。我不想使用它的 ID(getElementById) 来获取表单，因为我想获得一个更通用的解决方案来获取表单，input type = password 来自多个表单。

我已经研究了document.forms.elements，但我无法找到解决方案。请帮忙。

编辑：在这里，我给出了一个示例 html 代码，但我的问题相当笼统。在此编辑之前给出的答案使用.parentNode() 来获取input 标记的父节点。但是如果input 在<span> 或<section> 等标签下，那么.parentNode() 不会给出<form> 标签。牢记这一点，如何使用 Javascript DOM 从具有多个表单的页面中获取带有 input type = password 的 form 标记？

【问题讨论】：

标签： javascript html forms dom

【解决方案1】：

就您现在的 HTML 而言，您可以尝试使用 querySelector() 和 parentNode，如下所示：

var passForm = document.querySelector('input[type=password]').parentNode;
console.log(passForm);

<form id="form1">
  <div id="fullnameIDdiv">
    Full Name: <input type="text" name="fullname" /><br />
  </div>
  <div id="usernameIDdiv">
    Username: <input type="text" name="username" /><br />
  </div>
  Password: <input type="password" name="password" /><br />
  <input type="submit" value="Submit" />
</form>

<form id="form2">
  <div id="firstName">
    Full Name: <input type="text" name="fname" /><br />
  </div>
  <div id="lastName">
    Username: <input type="text" name="lname" /><br />
  </div>
  <input type="submit" value="Submit" />
</form>

【讨论】：

等中的输入是什么，然后以 google.com 登录页面的形式呈现整个内容。在那种情况下，表单将不是 parentNode 对吗？那我该怎么办。
@Ashutosh，这就是为什么我提到 现在您的 HTML 格式，您可以使用新标记更新问题或提出单独的问题。
@Ashutosh，如果该元素是另一个元素，那么您可以使用另一个 .parentNode，例如 document.querySelector('input[type=password]').parentNode.parentNode

【解决方案2】：

最简单的方法是使用 jQuery。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="form1">
        <div id="fullnameIDdiv">
          Full Name: <input type="text" name="fullname" /><br />
        </div>
        <div id="usernameIDdiv">
          Username: <input type="text" name="username" /><br />
        </div>
        Password: <input type="password" name="password" /><br />
        <input type="submit" value="Submit" />
      </form>
      
      <form id="form2">
        <div id="firstName">
          Full Name: <input type="text" name="fname" /><br />
        </div>
        <div id="lastName">
          Username: <input type="text" name="lname" /><br />
        </div>
        <input type="submit" value="Submit" />
      </form>
      <script>
          $("form>input[type='password']").parent();
      </script>
</body>

【讨论】：