JS获取文本框的值详解

JS是一种脚本语言，广泛应用于浏览器端，可以驱动HTML和CSS来实现动态效果，其中获取文本框的值是开发中经常会用到的一种操作。本文将就JS获取文本框的值的相关内容，进行多方面的阐述。

一、改变文本框的值

JS可以通过id、class、标签名等获取到DOM节点，从而对节点进行修改。下面是修改文本框的值的代码示例：

let input = document.getElementById('input');
input.value = 'new value';

以上代码首先通过id获取到了一个文本框的节点对象，然后更改了它的value属性，这样就可以改变文本框的值。

二、获取id为1的文本框的值

在HTML中，每个元素都可以拥有一个唯一的id属性，我们可以通过这个属性来获取相应的文本框的值。以下是获取id为1的文本框的值的代码示例：

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

以上代码通过getElementById方法获取到了id为input1的文本框节点对象，然后通过它的value属性获取到了该文本框的值，最后通过alert方法输出了该值。

三、获取文本框的值语句

获取文本框的值的语句非常简单，只需要获取到文本框的节点对象，然后通过其value属性获取即可。以下是获取文本框的值语句的代码示例：

let input = document.getElementById('input');
let value = input.value;

以上代码中，首先通过getElementById方法获取到了id为input的文本框节点对象，然后通过其value属性获取到了该文本框的值，最后将该值赋给value变量。

四、获取文本框的值并显示

JS不仅可以获取文本框的值，还可以将其显示出来。以下是获取文本框的值并显示的代码示例：

let input = document.getElementById('input');
let value = input.value;
let div = document.getElementById('display');
div.innerText = value;

以上代码通过getElementById方法获取到了id为input的文本框节点对象，并获取了该文本框的值。然后通过getElementById方法获取到了id为display的div节点对象，使用其innerText属性将文本框的值显示在该div中。

五、获取文本框的值进行计算

JS除了可以获取文本框的值和将其显示出来之外，还可以对其进行计算。以下是获取文本框的值进行计算的代码示例：

let input1 = document.getElementById('input1');
let input2 = document.getElementById('input2');
let value1 = parseInt(input1.value);
let value2 = parseInt(input2.value);
let result = value1 + value2;
alert(result);

以上代码中，首先通过getElementById方法分别获取到了id为input1和input2的文本框节点对象，并通过其value属性获取了这两个文本框的值。然后将这两个值都转化为数字类型，然后将它们相加，并将结果弹出。

六、获取文本框的值进行加减乘除

JS除了可以对文本框的值进行加法操作之外，还可以进行减、乘、除操作。以下是获取文本框的值进行加减乘除的代码示例：

let input1 = document.getElementById('input1');
let input2 = document.getElementById('input2');
let value1 = parseInt(input1.value);
let value2 = parseInt(input2.value);
let add = value1 + value2;
let sub = value1 - value2;
let mul = value1 * value2;
let div = value1 / value2;

以上代码通过getElementById方法分别获取到了id为input1和input2的文本框节点对象，并获取了这两个文本框的值。然后将这两个值都转化为数字类型，分别进行加、减、乘、除运算，并将结果赋给相应的变量。

七、获取文本框的值四种方法

获取文本框的值有多种方法，以下将介绍四种常用的方法。

方法一：通过id获取文本框节点对象，再获取其value值

let input = document.getElementById('input');
let value = input.value;

方法二：通过name属性获取文本框数组，在通过下标获取相应的value值

HTML代码如下：

<input type="text" name="inputs[]" value="1">
<input type="text" name="inputs[]" value="2">
<input type="text" name="inputs[]" value="3">
<input type="text" name="inputs[]" value="4">

JS代码如下：

let inputs = document.getElementsByName('inputs[]');
let value1 = inputs[0].value;
let value2 = inputs[1].value;
let value3 = inputs[2].value;
let value4 = inputs[3].value;

方法三：通过class获取文本框节点对象和value值

HTML代码如下：

<input type="text" id="input1" class="input" value="1">
<input type="text" id="input2" class="input" value="2">
<input type="text" id="input3" class="input" value="3">
<input type="text" id="input4" class="input" value="4">

JS代码如下：

let inputs = document.getElementsByClassName('input');
let value1 = inputs[0].value;
let value2 = inputs[1].value;
let value3 = inputs[2].value;
let value4 = inputs[3].value;

方法四：通过标签名获取文本框节点对象和value值

HTML代码如下：

<input type="text" name="input1" value="1">
<input type="text" name="input2" value="2">
<input type="text" name="input3" value="3">
<input type="text" name="input4" value="4">

JS代码如下：

let inputs = document.getElementsByTagName('input');
let value1 = inputs[0].value;
let value2 = inputs[1].value;
let value3 = inputs[2].value;
let value4 = inputs[3].value;

八、获取节点的文本值

JS不仅可以获取文本框的值，还可以获取节点的文本值，节点的文本值即元素节点中的文本内容，可以通过innerText属性来获取。以下是获取节点的文本值的代码示例：

HTML代码如下：

<div id="text">hello world</div>

JS代码如下：

let div = document.getElementById('text');
let text = div.innerText;
alert(text);

以上代码通过getElementById方法获取到了id为text的div节点对象，然后通过其innerText属性获取了该div中的文本内容，最后弹出该内容。

九、获取文本框输入的值

除了可以获取文本框的value属性值之外，JS还可以获取文本框的原始值，即用户在输入框中输入的内容，在有些场景下，这种方式更为实用。以下是获取文本框输入的值的代码示例：

HTML代码如下：

<input type="text" id="input" oninput="showValue()">

JS代码如下：

function showValue() {
  let input = document.getElementById('input');
  let value = input.value;
  alert(value);
}

以上代码中，通过为文本框添加oninput事件，可以在用户每次输入完成后即时获取输入的内容，这样就可以获取文本框输入的值。

小结

本文详细阐述了JS获取文本框的值的相关内容，从获取文本框的值并显示、获取文本框的值进行计算、获取文本框的值四种方法、获取节点的文本值以及获取文本框输入的值等多个方面进行了说明，并提供了相应的代码示例，希望能对开发者们有所帮助。