How to get controls in html using javascript

With the continuous development of front-end development, JavaScript has become an essential skill. Many times we need to obtain controls in HTML to operate or change. This article will introduce how JavaScript obtains controls in HTML.

1. Get a single control

To get a single control in HTML, we can use the following two methods:

1.1. Get by ID

In HTML, each control has a unique ID, and we can get a control through this unique ID. The following is an example:

<input type="text" id="user-name" value="John Doe">

We can obtain the above input control through the following code:

var userNameInput = document.getElementById("user-name");

At this time, userNameInput is the input control obtained. It can be used directly in the code.

1.2. Obtaining through properties

We can obtain the corresponding control through the properties of the control. The following is an example:

<input type="text" name="user-name" value="John Doe">

We can obtain the above input control through the following code:

var userNameInput = document.getElementsByName("user-name")[0];

In this example, we use the getElementsByName function to obtain the input control , because this control does not have an ID.

2. Get multiple controls

If we need to get multiple controls of the same type in HTML, we can use the following two methods:

2.1. Through tag names Get

We can get all the same type of controls in HTML through the tag name. The following is an example:

<input type="text" name="user-name" value="John Doe">

We can obtain all input controls through the following code:

var inputs = document.getElementsByTagName("input");

At this time, inputs are all input controls.

2.2. Get by class name

We can get all controls with the same class name in HTML by class name. The following is an example:

<input type="text" class="user-input" value="John Doe">
<input type="text" class="user-input" value="john.doe@example.com">
<input type="text" class="user-input" value="+1 234 567 890">

We can obtain all input controls through the following code:

var inputs = document.getElementsByClassName("user-input");

At this time, inputs is all the class "user-input" " input control.

3. Summary

The above is how JavaScript obtains HTML controls. When we need to operate controls in HTML, we first need to obtain these controls before we can perform subsequent operations.

The above is the detailed content of How to get controls in html using javascript. For more information, please follow other related articles on the PHP Chinese website!