Comment obtenir des contrôles en HTML en utilisant Javascript-Questions et réponses frontales-php.cn

Comment obtenir des contrôles en HTML en utilisant Javascript

PHPz

Libérer： 2023-04-06 10:48:36

original

1112 Les gens l'ont consulté

Avec le développement continu du développement front-end, JavaScript est devenu une compétence essentielle. Nous avons souvent besoin d'obtenir des contrôles en HTML pour fonctionner ou modifier. Cet article présentera comment JavaScript obtient des contrôles en HTML.

1. Obtenir un seul contrôle

Pour obtenir un seul contrôle en HTML, nous pouvons utiliser les deux méthodes suivantes :

1.1 Obtenir par ID

En HTML, chaque contrôle a un ID unique, nous pouvons utiliser cet unique. ID obtient un contrôle. Voici un exemple :

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

Copier après la connexion

Nous pouvons obtenir le contrôle d'entrée ci-dessus via le code suivant :

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

Copier après la connexion

À ce stade, userNameInput est le contrôle d'entrée obtenu, qui peut être utilisé directement dans les codes suivants . userNameInput 就是获取到的这个 input 控件，在之后的代码中就可以直接使用了。

1.2. 通过属性获取

我们可以通过控件的属性来获取到相应的控件。以下是一个例子：

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

Copier après la connexion

我们可以通过以下代码来获取上述 input 控件：

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

Copier après la connexion

在这个例子中，我们使用了 getElementsByName 函数来获取 input 控件，因为这个控件并没有 ID。

2. 获取多个控件

如果我们需要获取 HTML 中多个相同类型的控件，我们可以使用以下两个方法：

2.1. 通过标签名获取

我们可以通过标签名来获取 HTML 中所有相同类型的控件。以下是一个例子：

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

Copier après la connexion

我们可以通过以下代码来获取所有的 input 控件：

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

Copier après la connexion

此时，inputs 就是所有的 input 控件。

2.2. 通过类名获取

我们可以通过类名来获取 HTML 中所有相同类名的控件。以下是一个例子：

<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">

Copier après la connexion

我们可以通过以下代码来获取所有的 input 控件：

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

Copier après la connexion

此时，inputs

1.2. Obtention via les propriétés

Nous pouvons obtenir le contrôle correspondant via les propriétés du contrôle. Voici un exemple :

rrreee

Nous pouvons obtenir le contrôle d'entrée ci-dessus via le code suivant : 🎜rrreee🎜Dans cet exemple, nous utilisons la fonction getElementsByName pour obtenir le contrôle d'entrée, car ce contrôle ne pas de pièce d'identité. 🎜🎜2. Obtenez plusieurs contrôles🎜🎜Si nous avons besoin d'obtenir plusieurs contrôles du même type en HTML, nous pouvons utiliser les deux méthodes suivantes : 🎜🎜2.1 Obtenir par nom de balise🎜🎜Nous pouvons obtenir du HTML par nom de balise. même type de contrôles. Voici un exemple : 🎜rrreee🎜Nous pouvons obtenir tous les contrôles d'entrée via le code suivant : 🎜rrreee🎜À l'heure actuelle, inputs correspond à tous les contrôles d'entrée. 🎜🎜2.2. Obtenir par nom de classe🎜🎜Nous pouvons obtenir tous les contrôles avec le même nom de classe en HTML par nom de classe. Voici un exemple : 🎜rrreee🎜Nous pouvons obtenir tous les contrôles d'entrée via le code suivant : 🎜rrreee🎜À l'heure actuelle, inputs correspond à tous les contrôles d'entrée de classe "user-input". 🎜🎜3. Résumé🎜🎜Ce qui précède explique comment JavaScript obtient les contrôles HTML. Lorsque nous devons utiliser des contrôles en HTML, nous devons d’abord obtenir ces contrôles avant de pouvoir effectuer des opérations ultérieures. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!