Element nach Name in JavaScript abrufen

1. Holen Element durch getElementsByName() in JavaScript
2. Element durch querySelectorAll() in JavaScript abrufen

Es gibt Möglichkeiten, ein Element wie getElementById() und getElementByClass() zu erhalten. Aber was ist, wenn Sie alle Elemente mit einem bestimmten Namen auswählen / bearbeiten möchten?

JavaScript bietet die Methode querySelectorAll() oder getElementsByName(), um diese Aufgabe auszuführen.

In diesem Artikel wird erläutert, wie Sie Elemente in JavaScript nach Namen abrufen.

Holen Element durch getElementsByName() in JavaScript

getElementsByName ist eine eingebaute document-Methode, die das Objects/NodeList-Element zurückgibt, dessen name-Attribut mit dem angegebenen Namen übereinstimmt. Diese NodeList stellt ein Array von Knoten dar, auf die über einen Index zugegriffen werden kann, und dieser Index beginnt wie jedes andere Array mit 0.

Syntax

document.getElementsByName(name);

name ist ein erforderlicher Parameter, der den name eines HTML-Attributs angibt, das übereinstimmen muss. Es gibt das Objekt des entsprechenden DOM-Elements zurück, wenn die Elemente gefunden werden; andernfalls wird null zurückgegeben.

Der Unterschied zwischen getElementsByName und querySelectorAll besteht darin, dass getElementsByName zuerst nur die Elemente auswählt, deren angegebenes Namensattribut mit dem angegebenen Namen übereinstimmt. Während querySelectorAll jeden Selektor verwenden kann, bietet dies mehr Flexibilität.

Lesen Sie für weitere Informationen die Dokumentation der Methode getElementById.

Beispielcode:

<div>
  <label>First Name</label>
  <input type="text" id="firstName" name="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" name="lastName" value="Doe">
</div>

const firstName = document.getElementsByName('firstName');
const lastName = document.getElementsByName('lastName');
console.log(firstName[0].value);
console.log(lastName[0].value);

Der obige Code definierte zwei Eingabeelemente mit firstName und lastName. Wenn wir mit getElementsByName() auf das Dokument zugreifen, findet es alle Knoten, deren Namensattribut mit dem Vornamen übereinstimmt, und gibt NodeList zurück. Da es sich um ein Array handelt, können wir mit [0] das erste passende Element extrahieren. Wenn mehr als ein übereinstimmendes Element gefunden wird, können Sie alle Werte durch das Array iterieren und ausdrucken. Die Ausgabe wird wie folgt aussehen:

Ausgabe:

John
Doe

Element durch querySelectorAll() in JavaScript abrufen

querySelectorAll() ist eine eingebaute document-Methode, die die Element-/NodeList-Objekte zurückgibt, deren Selektoren mit den angegebenen Selektoren übereinstimmen. Es können auch mehrere Selektoren übergeben werden.

Der Unterschied zwischen querySelectorAll() und querySelector() besteht darin, dass zuerst alle Objekte des übereinstimmenden Elements zurückgegeben werden und dann das Objekt des einzelnen übereinstimmenden Elements. Wenn ein ungültiger Selektor übergeben wird, wird ein SyntaxError angezeigt.

Syntax

document.querySelectorAll(selectors);

selectors ist ein erforderlicher Parameter, der den selector eines HTML-Attributs angibt, das übereinstimmen muss. Sie können mehrere Selektoren übergeben, indem Sie Kommas trennen. Beispielsweise findet document.querySelectorAll('input[name=firstName]') alle Eingabeelemente, deren Name firstName ist. Es gibt übereinstimmende DOM-Elementobjekte zurück, wenn übereinstimmende Elemente gefunden werden; Andernfalls wird eine leere NodeList zurückgegeben.

Lesen Sie für weitere Informationen die Dokumentation der Methode querySelectorAll.

Beispielcode:

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const selectors = document.querySelectorAll('input[name=firstName]');
console.log(selectors.length, selectors[0].value);

Der obige Code definierte zwei Eingabeelemente mit firstName und lastName. Wenn wir mit querySelectorAll() auf das Dokument zugreifen, findet es alle Knoten, deren Namensattribut mit dem angegebenen Namen übereinstimmt, und gibt NodeList zurück. Da es sich um ein Array handelt, können wir mit [0] das erste passende Element extrahieren. Wenn mehr als ein zufälliges Element gefunden wird, können Sie die Matrix durchlaufen und alle Werte drucken. Die Ausgabe wird wie folgt aussehen:

Ausgabe:

1
John