如何使用 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 和名称，这些名称可能包含“form”一词。

语法

使用以下语法，您可以获取文档中没有使用标签创建的表单的数量。

var forms = document.querySelectorAll("[type='form'],[name ='form'],[id='form']"); 
for(var i = 0; i < forms.length; i++);
 x.innerHTML = forms.length;

算法

步骤1 − 创建两个表单，一个使用 <div> 标签，另一个使用 <form> 标签。

步骤 2 − 对于第一个 div，编写 type = 'form'，对于第二个 div，编写 id = 'form'。

步骤 3 − 在 JavaScript 中，使用 querySelectorAll() 方法通过标签和 ID 名称获取两个 <div> 标签。

步骤 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() 方法。可能还有其他方法可以获取文档中创建的表单数量。上面提到的方法是最可靠的。

更新于：2022年9月14日

995 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告