堕落不振功业废,勤耕不辍日月新

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

综合 hailen 20℃

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

参考内容

转载请注明:我是IT » JavaScript 获取 input 输入框内容的几种方法

喜欢 (0)or分享 (0)