如何使用 Javascript DOM 从具有多个表单的页面获取具有输入类型密码的表单？
Posted
技术标签:
【中文标题】如何使用 Javascript DOM 从具有多个表单的页面获取具有输入类型密码的表单？【英文标题】：How to get the form with input type password from a page with multiple forms using 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 标记？
【问题讨论】：
【参考方案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>【讨论】：
最简单的方法是使用 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>
【讨论】：
以上是关于如何使用 Javascript DOM 从具有多个表单的页面获取具有输入类型密码的表单？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 javascript 从 iframe 内部获取 iframe 的高度？具有多个 iframe 的页面呢？