Easy Tutorial
❮ Android Tutorial Seekbar Wx Xcx Repo ❯

There are several ways to get the content of an input box in JavaScript:

Method 1

document.getElementById('textbox_id').value // Get the content of the specified id

Example

document.getElementById("searchTxt").value;

Try it »

Note: The following methods 2, 3, 4, and 6 return a collection of elements, which can be accessed by index [index] to get a specific element, the first element uses [0], the second element uses [1], and so on...

Method 2

Use the following method to return an HTMLCollection:

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

The HTMLCollection interface represents a collection of elements (in the order they appear in the document flow) that is a generic collection of elements (similar to an array-like object like arguments) and provides methods and properties to select elements from this collection.

In the HTML DOM, the HTMLCollection is live; it automatically updates when the document structure it contains changes.

Example

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

Method 3

Get an HTMLCollection by tag name:

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

Example

Get the content by the input tag name:

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

Method 4

The following returns a NodeList, the NodeList object is a collection of nodes, usually returned by properties such as Node.childNodes and methods, such as document.querySelectorAll.

The NodeList is a live collection, meaning that if the node tree in the document changes, the NodeList will also change.

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

Example

Get the content by the name attribute set on the element:

document.getElementsByName("searchTxt")[0].value; // The name attribute value is searchTxt

Method 5

Use CSS selectors to get it, this method is more powerful:

document.querySelector('selector').value // selector is a CSS selector

Example

Example

document.querySelector('#searchTxt').value; // Get by id
document.querySelector('.searchField').value; // Get by class class
document.querySelector('input').value; // Get by tag name
document.querySelector('[name="searchTxt"]').value; // Get by name attribute and value

Method 6

querySelectorAll can return all elements that match the CSS selector, which is a Nodelist.

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

Example

Example

document.querySelectorAll('#searchTxt')[0].value; // Get by id
document.querySelectorAll('.searchField')[0].value; // Get by class class
document.querySelectorAll('input')[0].value;  // Get by tag name
document.querySelectorAll('[name="searchTxt"]')[0].value; // Get by name attribute and value

Reference Content

-JavaScript getElementById() Method

-JavaScript getElementsByClassName() Method

-JavaScript getElementsByTagName() Method

-JavaScript getElementsByName() Method

-JavaScript querySelector() Method

-JavaScript querySelectorAll() Method

-DOM HTMLCollection

-DOM NodeList

**Click to Share Notes

Cancel

-

-

-

❮ Android Tutorial Seekbar Wx Xcx Repo ❯