So erhalten Sie Steuerelemente in HTML mithilfe von Javascript

Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklung ist JavaScript zu einer wesentlichen Fähigkeit geworden. Oftmals müssen wir Steuerelemente in HTML abrufen, um sie bedienen oder ändern zu können. In diesem Artikel wird erläutert, wie JavaScript Steuerelemente in HTML erhält.

1. Holen Sie sich ein einzelnes Steuerelement

Um ein einzelnes Steuerelement in HTML zu erhalten, können wir die folgenden zwei Methoden verwenden:

1.1. Get by ID

In HTML hat jedes Steuerelement eine eindeutige ID, wir können This unique verwenden ID erhält eine Kontrolle. Das Folgende ist ein Beispiel:

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

Wir können die obige Eingabesteuerung durch den folgenden Code erhalten:

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

Zu diesem Zeitpunkt ist userNameInput die erhaltene Eingabesteuerung, die direkt in nachfolgenden Codes verwendet werden kann . userNameInput 就是获取到的这个 input 控件，在之后的代码中就可以直接使用了。

1.2. 通过属性获取

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

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

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

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

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

2. 获取多个控件

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

2.1. 通过标签名获取

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

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

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

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

此时，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">

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

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

此时，inputs

1.2. Erhalten durch Eigenschaften

Wir können die entsprechende Kontrolle über die Eigenschaften der Kontrolle erhalten. Das Folgende ist ein Beispiel:

rrreee

Wir können die obige Eingabesteuerung durch den folgenden Code erhalten: 🎜rrreee🎜In diesem Beispiel verwenden wir die Funktion getElementsByName, um die Eingabesteuerung abzurufen, da diese Steuerung dies tut habe keinen Ausweis. 🎜🎜2. Mehrere Steuerelemente abrufen🎜🎜Wenn wir mehrere Steuerelemente desselben Typs in HTML benötigen, können wir die folgenden zwei Methoden verwenden: 🎜🎜2.1. Abrufen nach Tag-Namen🎜🎜Wir können HTML nach Tag-Namen abrufen gleiche Art von Kontrollen. Das Folgende ist ein Beispiel: 🎜rrreee🎜Wir können alle Eingabesteuerelemente über den folgenden Code abrufen: 🎜rrreee🎜Zu diesem Zeitpunkt sind inputs alle Eingabesteuerelemente. 🎜🎜2.2. Nach Klassennamen abrufen🎜🎜Wir können alle Steuerelemente mit demselben Klassennamen in HTML nach Klassennamen abrufen. Das Folgende ist ein Beispiel: 🎜rrreee🎜Wir können alle Eingabesteuerelemente über den folgenden Code abrufen: 🎜rrreee🎜Zu diesem Zeitpunkt sind inputs alle Eingabesteuerelemente mit der Klasse „Benutzereingabe“. 🎜🎜3. Zusammenfassung🎜🎜Das Obige zeigt, wie JavaScript HTML-Steuerelemente erhält. Wenn wir Steuerelemente in HTML ausführen müssen, müssen wir diese Steuerelemente zunächst abrufen, bevor wir nachfolgende Vorgänge ausführen können. 🎜

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Steuerelemente in HTML mithilfe von Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!