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獲取文本框的值的相關內容，從獲取文本框的值並顯示、獲取文本框的值進行計算、獲取文本框的值四種方法、獲取節點的文本值以及獲取文本框輸入的值等多個方面進行了說明，並提供了相應的代碼示例，希望能對開發者們有所幫助。