javascript 获取 input

原创

mob64ca12f58d71 2023-08-05 09:06:35 ©著作权

文章标签 javascript HTML Web 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f58d71的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript获取input的方法

在JavaScript中，我们经常需要获取用户输入的数据，其中最常见的就是获取<input>标签中的值。本文将介绍几种常用的方法来获取<input>标签的值，并提供相应的代码示例。

1. 通过id获取input的值

我们可以通过给<input>标签设置一个唯一的id属性，然后使用document.getElementById()方法来获取其值。

// HTML代码
<input type="text" id="myInput">

// JavaScript代码
let input = document.getElementById("myInput");
let value = input.value;
console.log(value);

这段代码首先通过getElementById()方法获取到id为myInput的<input>元素，然后使用.value属性获取其值，并将其打印到控制台上。

2. 通过name属性获取input的值

如果<input>标签没有设置id属性，但有name属性，我们可以使用document.getElementsByName()方法来获取其值。

// HTML代码
<input type="text" name="myInput">

// JavaScript代码
let input = document.getElementsByName("myInput")[0];
let value = input.value;
console.log(value);

这段代码首先通过getElementsByName()方法获取name为myInput的所有元素，返回一个数组，然后通过[0]来获取第一个元素，最后使用.value属性获取其值并打印。

3. 通过class获取input的值

如果有多个<input>标签都有相同的class，我们可以使用document.getElementsByClassName()方法来获取它们的值。

// HTML代码
<input type="text" class="myInput">
<input type="text" class="myInput">

// JavaScript代码
let inputs = document.getElementsByClassName("myInput");
for (let i = 0; i < inputs.length; i++) {
    let value = inputs[i].value;
    console.log(value);
}

这段代码首先通过getElementsByClassName()方法获取所有class为myInput的元素，返回一个类数组对象，然后通过遍历数组，使用.value属性获取每个元素的值并打印。

4. 通过标签名获取input的值

如果我们想获取所有的<input>标签的值，可以使用document.getElementsByTagName()方法。

// HTML代码
<input type="text">
<input type="text">

// JavaScript代码
let inputs = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
    let value = inputs[i].value;
    console.log(value);
}

这段代码首先通过getElementsByTagName()方法获取所有的<input>标签元素，返回一个类数组对象，然后通过遍历数组，使用.value属性获取每个元素的值并打印。

5. 通过querySelector获取input的值

如果我们想要更灵活地定位<input>标签，可以使用document.querySelector()方法，配合CSS选择器来获取。

// HTML代码
<input type="text" id="myInput">
<input type="text" class="myInput">

// JavaScript代码
let input1 = document.querySelector("#myInput");
let input2 = document.querySelector(".myInput");
let value1 = input1.value;
let value2 = input2.value;
console.log(value1);
console.log(value2);

这段代码首先通过querySelector()方法获取id为myInput的<input>元素，并使用.value属性获取其值并打印。然后通过类选择器获取class为myInput的<input>元素，并获取其值并打印。

结论

通过上述几种方法，我们可以方便地获取<input>标签中的值，根据不同的需求选择合适的方法。一些常用的方法如通过id获取和通过name获取，适用于只有一个输入框的情况。如果有多个输入框，可以通过class或标签名来获取。此外，querySelector()方法提供了更灵活的选择器来定位元素。

以上就是在JavaScript中获取<input>标签值的几种常用方法。希望本文对你有所帮助。