JavaScript 获取 input 输入框内容的几种方法

 

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 属性和值来获取