js如何获取所有input

在JavaScript中，获取页面上所有的<input>元素可以通过多种方式实现。以下是几种常见的方法：

方法一：使用 `document.getElementsByTagName`

这种方法可以获取页面上所有指定标签名的元素。

var inputs = document.getElementsByTagName('input');

方法二：使用 `document.querySelectorAll`

querySelectorAll 方法返回文档中匹配指定 CSS 选择器的所有元素。

var inputs = document.querySelectorAll('input');

方法三：使用 `document.forms`

如果你知道输入框在特定的表单中，可以通过表单对象获取。

var form = document.forms[0]; // 假设第一个表单包含所需的输入框
var inputs = form.elements;

示例代码

以下是一个简单的示例，展示如何遍历所有获取到的<input>元素并打印它们的值：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input Elements Example</title>
</head>
<body>

<form id="myForm">
  <input type="text" name="username" value="JohnDoe">
  <input type="password" name="password" value="secret">
  <input type="email" name="email" value="john@example.com">
</form>

<script>
// 使用 querySelectorAll 获取所有 input 元素
var inputs = document.querySelectorAll('input');

// 遍历所有 input 元素并打印它们的值
inputs.forEach(function(input) {
  console.log('Name:', input.name, 'Value:', input.value);
});
</script>

</body>
</html>

应用场景

表单验证：在提交表单前检查所有输入框是否填写正确。
数据处理：在用户操作后收集所有输入框的数据进行处理。
自动化测试：在自动化测试脚本中获取输入框的值进行断言。

注意事项

当使用 document.forms 方法时，需要注意表单索引的正确性，因为如果页面上有多个表单，索引错误会导致获取不到正确的输入框集合。
在处理获取到的输入元素集合时，应考虑到集合可能是动态变化的（例如，用户可能实时添加或删除输入框），因此可能需要实时更新或监听DOM变化。

通过上述方法，你可以有效地获取页面上的所有<input>元素，并根据需要进行进一步的操作。

页面内容是否对你有帮助？

有帮助

没帮助

如何运行脚本两次

我是一个初学者，这对我来说是一个挑战；我尝试添加`for (var i= 0；I< input.length；i++)，但它不起作用。如果有任何帮助，我将不胜感激。 input = document.querySelector('.js-tel') input.addEventListener('input', evt =&

浏览 34提问于2020-05-06得票数 1

3回答

如何抓取元素id -使用Selenium WebDriver 2

、、

webElements1 = (Driver.FindElements(By.XPath("//*[@id='ctl00_ContentPlaceHolder1_Control1_lstCategory']//input"))).ToList();我正在试图找到一种方法来从我得到的列表中获取ID，下面是我的代码和屏幕的打印快照。//WebDriver获取文本列表下面的代码返回了正确的记录数，但它只给了我Text，但我想要

浏览 3提问于2012-09-21得票数 15

回答已采纳

2回答

使用循环动态更新表单id值

、

我的第一个方法是： $('#id_Name_set-1').val(String($('#id_Name_set-0').val())); $('#id_Name_set-1'

浏览 2提问于2019-11-05得票数 0

3回答

获取文档中的所有<input>

、

如何在控制台中显示HTML中所有<input>标记的列表？我尝试使用$('input')、$(':input')甚至$('tbody input') --所有这些命令都返回jQuery.fn.jQuery.init[<number>]。无论如何，我正在使用谷歌Chrome。然而，我认为它不会影响其他浏览器，当然IE是一种豁免。

浏览 6提问于2014-02-06得票数 1

回答已采纳

3回答

获取页面包含的输入值的整个HTML

、、

我试图将整个页面保存为HTML文件，其中包含所有已写入输入的值。我试过这个：但是它不会保存来自输入的值。

浏览 28提问于2016-08-04得票数 0

回答已采纳

1回答

我需要帮助将输入字段从div添加到另一个div按钮单击。

-当用户单击“提交”按钮时，需要将新学生添加到列表中，搜索需要重置并显示所有学生。<!id="name" type="text" placeholder="Enter New Name"/></p> <

浏览 2提问于2019-05-30得票数 2

回答已采纳

5回答

如何使用循环访问值隐藏元素

、

我所需要的 <input type="hidden" id="evt_date" value="april 05"><script> console.

浏览 3提问于2015-01-31得票数 0

回答已采纳

1回答

如何在Angular JS中获取复选框数组？

我在HTML中有一些复选框：<input type="checkbox" name="type[]" value="4">如何

浏览 2提问于2015-04-20得票数 3

2回答

如何使用jQuery正确捕获“`focus”上的HTML cell (td)值

、

问题是:如何在focus in上正确捕获字段值在页面加载时，表中的行数是1 (行索引0)。

浏览 6提问于2020-10-24得票数 0

2回答

如何选择其他量程滑块

、、

我可以用slider_02移动“document.querySelector("#slider_02").value”，但是我需要移动所有其他滑块。我可以使用例如"not“吗?我的问题是如何选择其他滑块.

浏览 3提问于2016-02-21得票数 2

3回答

如何获取空输入字段的计数？

、

如何检查特定ID (form1，form2)中输入字段不完整的数量。如果两个输入域是空的，我想要一个消息，比如“不完整的输入2”，在JS中怎么可能做到这一点呢？<div id="form1"> <input type="text" value=""> <input type="tex

浏览 54提问于2020-09-05得票数 0

1回答

使用javascript或jQuery读取HTML数组

、、、

我在HTML中有数组元素<input type="checkbox" value="Value2" name="model[settings][]"> <input type="checkbox" value="Value3"

浏览 1提问于2015-01-21得票数 0

2回答

Angularjs选择数据传递

、、、

我从JSON服务器获取所有这些信息。“Make”输入显示所有的汽车制造(每个Make对象都有一个模型对象)。“Model”输入显示了用户选择的Make的所有模型。我不知道如何获取的数据，并显示所有的模型，为该制造。(然后是一年)。<label class="item item-input item-select"> <div class="input-label">

浏览 2提问于2015-03-28得票数 2

回答已采纳

8回答

正确的jquery选择器选择

、

我有我表格的这一部分：我的问题是：根据名称获得值的正确选择器是什么？如何只获取“名称”，仅基于输入内容，而不添加任何#id或类属性。

浏览 3提问于2012-01-12得票数 1

3回答

jQuery -获取具有特定类名的输入值

如何获取特定类的输入型文本的所有值？ console.log($(this).val()); });

浏览 0提问于2016-12-04得票数 2

1回答

如何利用vue.js获取输入的价值？

、

现在，我正在学习vue.js，我想知道如何从输入表单中获取所有数据值？我想从那里获取所有数据&保存到我的数据库中。但是，我还是不知道，怎么得到这些数据..。thx <form> <input v-mode

浏览 3提问于2017-03-08得票数 0

3回答

查找表单的输入子元素，无论它们有多少个父母

、

如何使用jQuery来查找表单中的所有输入/文本？我知道您可以先使用.children，然后使用.each，但我正在构建一个验证类，我不知道一些输入是否有包装器，因为它应该适用于我所有的表单。$('input[type=submit]').click(function(){ &#

浏览 4提问于2012-02-26得票数 4

回答已采纳

2回答

如何使用javascript获取页面上所有'input* stepper.js = "number"‘类型的总量和差值？*

我使用stepper.js ()来定制价格计算器中的'input type = "number"'，在编写javascript代码时遇到了一个问题。有几个日期属性为'data-value'的'input type = "number"'，步进器的总值由产品'input type = "number"'和'data-value'组成。"> <

浏览 19提问于2019-07-22得票数 0

回答已采纳

1回答

从jQuery中复选框的数组值中删除

、、、

users_picture']; <tr class='tr-data-users'> <input我需要一个数组中所有被选中用户的id(即复选框)。我是这样做的： <input type='checkbox' class='checkbox' onclick='if(this.chec

浏览 1提问于2016-03-31得票数 4

回答已采纳

2回答

如何在Backbone.js的视图对象中获取当前模板中的所有元素

、

如何在backbone.js的视图对象中从当前模板中获取所有输入元素，以便检查输入元素中的值。/*template*/ <input id="name" value="{name}"/> <inputid="address"

浏览 1提问于2013-04-08得票数 1

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js如何获取所有input

方法一：使用 document.getElementsByTagName

方法二：使用 document.querySelectorAll

方法三：使用 document.forms

示例代码

应用场景

注意事项

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

方法一：使用 `document.getElementsByTagName`

方法二：使用 `document.querySelectorAll`

方法三：使用 `document.forms`