JavaScript获取input输入框内容的几种方式及注意事项

获取 input 输入框内容有以下几种方式：

方法 1

document.getElementById('textbox_id').value // 获取指定 id 的内容

实例

document.getElementById("searchTxt").value;

尝试一下 »

注意：以下方法 2、3、4 和 6 返回元素的集合, 通过索引 来获取制定元素，第一个元素使用 ，第二个元素使用 ，以此类推...

方法 2

使用以下方法返回 :

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

接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（与 相似的类数组 (array-like) 对象），还提供了用来从该集合中选择元素的方法和属性。

HTML DOM 中的 是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。

实例

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

方法 3

通过标签名来获取 ：

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

实例

通过 input 标签名来获取内容：

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

方法 4

以下返回 ， 对象是节点的集合，通常是由属性如 Node. 和 方法，如. 返回的。

是一个实时集合，也就是说，如果文档中的节点树发生变化， 也会随之变化。

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

实例

通过元素设置的 name 属性来获取内容：

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

方法 5

使用 CSS 的选择器来获取，这种方法更强大：

document.querySelector('selector').value // selector 是 CSS 选择器

实例

方法 6

可以返回所有 CSS 选择器对于的元素，是一个 。

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

实例

参考内容

.value 方法 元素 获取 实例 集合