js获取input的方法

在JavaScript编程中，经常需要与网页中的输入框（input元素）进行交互，获取用户输入的值或者对输入框进行操作。下面将介绍几种常见的js获取input的方法。

一、通过id获取

这是最常用的方法之一。如果给input元素设置了唯一的id属性，就可以使用 document.getElementById() 方法来获取该元素。例如：

<input type="text" id="myInput">

var inputElement = document.getElementById('myInput');
var inputValue = inputElement.value;
console.log(inputValue);

这种方法简单直接，适用于单个input元素的获取。

二、通过class获取

当有多个相同类型的input元素，并且它们具有相同的class属性时，可以使用 document.getElementsByClassName() 方法获取一个包含这些元素的类数组对象，然后通过循环遍历获取每个元素的值。例如：

<input type="text" class="inputClass">
<input type="text" class="inputClass">

var inputElements = document.getElementsByClassName('inputClass');
for (var i = 0; i < inputElements.length; i++) {
    var value = inputElements[i].value;
    console.log(value);
}

三、通过标签名获取

如果想要获取页面中所有的input元素，可以使用 document.getElementsByTagName() 方法。它会返回一个包含所有指定标签名元素的类数组对象。示例如下：

<input type="text">
<input type="number">

var inputElements = document.getElementsByTagName('input');
for (var i = 0; i < inputElements.length; i++) {
    var value = inputElements[i].value;
    console.log(value);
}

四、使用querySelector和querySelectorAll

document.querySelector() 方法返回匹配指定选择器的第一个元素，而 document.querySelectorAll() 方法返回匹配指定选择器的所有元素的节点列表。例如：

<input type="text" id="input1">
<input type="text" class="inputClass">

var input1 = document.querySelector('#input1');
var inputClassElements = document.querySelectorAll('.inputClass');
console.log(input1.value);
inputClassElements.forEach(function(element) {
    console.log(element.value);
});

通过掌握这些js获取input的方法，可以更灵活地处理网页中的用户输入，实现各种交互效果和数据处理功能。