如何使用 JavaScript 获取文档中的表单数量?
在本教程中，我们将学习如何使用 JavaScript 获取文档中的表单数量。由于在 HTML 文档中使用不同的方法来创建表单，因此获取现有表单的数量可能会很棘手。但是，您可以使用一些方法来计算不使用 form 标记创建的表单的数量。
使用 length 属性
在 HTML 文档中创建表单的最广泛接受的方法是使用 <form> 标记。一些网站还使用 <div> 标记在文档中创建表单。因此，我们将讨论从 <form> 和 <div> 标签获取表单数量的方法。
语法
使用以下语法，我们可以获取带有 <form> 的 HTML 文档中的表单数量标签。
document.forms.length
算法
步骤 1 − 使用 <form> 在 HTML 文档中创建表单标签。
步骤 2 − 创建一个变量来获取表单数量。
步骤 3 − 使用 document.forms.length 获取表单数量。
步骤 4 − 使用 innerHTML 属性显示表单数量。
示例 1
在此示例中，我们创建了一个表单来检查 document.forms.length 如何确定实际的表单数量。您可以试验代码并增加表单数量以查看输出。
<html> <body> <form> <input type="text"> <input type="submit"> </form> <p id=numform></p> <script> let forms = document.forms.length; document.getElementById('numform').innerHTML = "Number of forms: " + forms; </script> </body> </html>
使用 querySelectorAll() 获取文档中的表单数量
由于可以使用 <div> 在网站内创建表单，因此您可以使用 querySelectorAll() 方法获取表单数量。在 querySelectorAll() 中，您必须提及类型、类、ID 和可能包含术语"表单"的名称。
语法
使用以下语法，您可以获取文档中创建的表单数量(不带标签)。
var forms = document.querySelectorAll("[type='form'],[name ='form'],[id='form']");
for(var i = 0; i < forms.length; i++);
x.innerHTML = forms.length;
算法
步骤1− 创建两个表单，一个使用<div>标签和其他使用标签。
步骤 2 − 对于第一个 div，写入 type = 'form'，对于第二个 div，写入 id = 'form'。
步骤 3 − 在 JavaScript 中，使用 querySelectorAll() 方法获取 <div>标签和id名称
步骤 4 − 使用增量运算符和.length方法获取使用<form>标签创建的表单数量。
示例
在下面的例子中，我们得到了没有标签创建的表单数量，并将其与使用<form>标签创建的表单数量相加。
<html> <body> <h4>Using <i>querySelectorAll()</i> to get the number of forms</h4> <div type="form"> <input type="text"> <input type="submit"> </div> <form> <input type="text"> <input type="submit"> </form> <p id="numform"></p> <script> var elms = document.querySelectorAll("[type='form']"); for (var i = 0; i < elms.length; i++); let x = elms.length; let forms = document.forms.length + x; document.getElementById('numform').innerHTML = "Number of forms: " + forms; </script> </body> </html>
虽然 document.forms.length 方法通常用于获取文档中存在的表单数量，但要找出实际存在的表单数量，您应该使用 querySelectorAll() 方法。可能还有其他方法可以获取文档中创建的表单数量。上述方法最可靠
