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

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

参考内容

• JavaScript getElementById() 方法
• JavaScript getElementsByClassName() 方法
• JavaScript getElementsByTagName() 方法
• JavaScript getElementsByName() 方法
• JavaScript querySelector() 方法
• JavaScript querySelectorAll() 方法
• DOM HTMLCollection
• DOM NodeList

• HTML DOM getElementById() 方法

  ​编辑 Document 对象

  实例

  返回指定 ID 的元素：

  document.getElementById("demo");

  
  尝试一下 »

  定义和用法

  getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

  HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName() 和 getElementsByTagName()。

  如果没有指定 ID 的元素返回 null

  如果存在多个指定 ID 的元素则返回第一个。

  如果需要查找到那些没有 ID 的元素，你可以考虑通过CSS选择器使用 querySelector()。

  ---

  浏览器支持

  

  

  

  

  

  所有主要浏览器都支持 getElementById() 方法

  ---

  语法

  document.getElementById(elementID)

  参数

  参数	类型	描述
  elementID	String	必须。元素ID属性值。

  返回值

  类型	描述
  元素对象	指定ID的元素

  技术细节

  DOM 版本

  Core Level 2 Document Object HTML DOM getElementsByClassName() 方法 ​编辑 Document 对象 实例 获取所有指定类名的元素： var x = document.getElementsByClassName("example"); 尝试一下 » 定义和使用 getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。 NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。 提示： 你可以使用 NodeList 对象的 length 属性来确定指定类名的元素个数，并循环各个元素来获取你需要的那个元素。 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号。 方法 getElementsByClassName() 4.0 9.0 3.0 3.1 9.5 语法 document.getElementsByClassName(classname) 参数 参数 类型 Description classname String 必须。你需要获取的元素类名。 多个类名使用空格分隔，如 "test demo"。 技术描述 DOM 版本: Core Level 1 Document Object 返回值： NodeList 对象，表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。 更多实例 实例 获取包含 "example" 和 "color" 类名的所有元素，并修改它的颜色: var x = document.getElementsByClassName("example color"); 尝试一下 »   实例 查看文档中有多少个样式 class="example" 的元素 (使用 NodeList 对的 length 属性): var x = document.getElementsByClassName("example").length; 尝试一下 »   实例 修改所有样式 class="example" 元素的背景颜色： var x = document.getElementsByClassName("example"); var i; for (i = 0; i < x.length; i++) {     x[i].style.backgroundColor = "red"; } 尝试一下 » 相关页面 CSS 教程: CSS 选择器 CSS 参考手册: CSS .class 选择器 HTML DOM 参考手册: element.getElementsByClassName() HTML DOM 参考手册: className 属性 HTML DOM 参考手册: HTML DOM classList 属性 HTML DOM 参考手册: HTML DOM Style 对象