JavaScript 獲取 input 輸入框內容有以下幾種方式:

方法 1

document.getElementById('textbox_id').value // 獲取指定 id 的內容

實例

document.getElementById("searchTxt").value;

嚐試一下 »

注意:以下方法 2、3、4 和 6 返回元素的集合, 通過索引 [index] 來獲取製定元素,第一個元素使用 [0],第二個元素使用 [1],以此類推...

方法 2

使用以下方法返回 HTMLCollection:

document.getElementsByClassName('class_name')[index].value

HTMLCollection 接口表示一個包含了元素(元素順序為文檔流中的順序)的通用集合(與 arguments 相似的類數組 (array-like) 對象),還提供了用來從該集合中選擇元素的方法和屬性。

HTML DOM 中的 HTMLCollection 是即時更新的(live);當其所包含的文檔結構發生改變時,它會自動更新。

實例

document.getElementsByClassName("searchField")[0].value;

方法 3

通過標簽名來獲取 HTMLCollection:

document.getElementsByTagName('tag_name')[index].value

實例

通過 input 標簽名來獲取內容:

document.getElementsByTagName("input")[0].value;

方法 4

以下返回 NodeList,NodeList 對象是節點的集合,通常是由屬性如 Node.childNodes 和 方法,如document.querySelectorAll 返回的。

NodeList 是一個實時集合,也就是說,如果文檔中的節點樹發生變化,NodeList 也會隨之變化。

document.getElementsByName('name')[index].value

實例

通過元素設置的 name 屬性來獲取內容:

document.getElementsByName("searchTxt")[0].value; // name 屬性值為 searchTxt

方法 5

使用 CSS 的選擇器來獲取,這種方法更強大:

document.querySelector('selector').value // selector 是 CSS 選擇器

實例

實例

document.querySelector('#searchTxt').value; //通過 id 獲取
document.querySelector('.searchField').value; //通過類 class 獲取
document.querySelector('input').value; //通過標簽名獲取
document.querySelector('[name="searchTxt"]').value; //通過 name 屬性和值來獲取

方法 6

querySelectorAll 可以返回所有 CSS 選擇器對於的元素,是一個 Nodelist。

document.querySelectorAll('selector')[index].value 

實例

實例

document.querySelectorAll('#searchTxt')[0].value; //通過 id 獲取
document.querySelectorAll('.searchField')[0].value; //通過類 class 獲取
document.querySelectorAll('input')[0].value;  //通過標簽名獲取
document.querySelectorAll('[name="searchTxt"]')[0].value; //通過 name 屬性和值來獲取

參考內容