怎么获取input里面的值（获取input内容）

怎么获取input里面的值

简介:

在前端开发中，我们经常需要获取页面上输入框（input）中的值，以便进行后续的处理或者展示。本文将介绍如何获取input里面的值，并提供几种常见的获取方式。

一、获取单个input的值

要获取单个input的值，我们可以使用JavaScript中的document对象。

详细说明:

1. 通过id获取值

每个input元素都可以通过id属性来唯一标识，我们可以使用document对象的getElementById()方法来获取该元素，并通过value属性获取该input的值。

```javascript

// HTML代码

// JavaScript代码

let input1Value = document.getElementById('input1').value;

console.log(input1Value); // 输出input1的值

```

2. 通过name获取值

如果有多个input元素都具有相同的name属性，我们可以使用document对象的getElementsByName()方法来获取一组具有相同name的元素，并通过循环遍历来获取每个input的值。

```javascript

// HTML代码

// JavaScript代码

let input2Values = document.getElementsByName('input2');

for (let i = 0; i < input2Values.length; i++) {

console.log(input2Values[i].value); // 分别输出每个input2的值

```

二、获取多个input的值

如果页面上有多个input元素，我们可以使用不同的方式来获取它们的值。

1. 通过标签名获取值

我们可以使用document对象的getElementsByTagName()方法来获取一组具有相同标签名的元素，并通过循环遍历来获取每个input的值。

```javascript

// HTML代码

// JavaScript代码

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

for (let i = 0; i < inputs.length; i++) {

console.log(inputs[i].value); // 分别输出每个input的值

```

2. 通过类名获取值

如果页面上的一组input元素都具有相同的类名，我们可以使用document对象的getElementsByClassName()方法来获取该组元素，并通过循环遍历来获取每个input的值。

```javascript

// HTML代码

// JavaScript代码

let input3Values = document.getElementsByClassName('input3');

for (let i = 0; i < input3Values.length; i++) {

console.log(input3Values[i].value); // 分别输出每个input3的值

```

总结：

本文介绍了如何获取input元素里面的值，包括单个input的获取和多个input的获取。我们可以根据具体情况使用不同的方法来获取需要的值，进而进行后续的操作。