Element nach Typ in JavaScript abrufen

1. Holen Element durch querySelectorAll() in JavaScript
2. Element durch getElementsByTagName() erhalten in JavaScript

JavaScript bietet verschiedene Möglichkeiten, ein Element wie getElementById() und getElementByClass() zu erhalten. Aber was ist, wenn Sie alle Elemente eines bestimmten Typs auswählen/verarbeiten möchten? JavaScript bietet die Methode querySelectorAll() oder getElementsByTagName(), um eine solche Aufgabe auszuführen.

In diesem Artikel erfahren Sie, wie Sie in JavaScript Elemente nach ihrem Typ abrufen.

Holen Element durch querySelectorAll() in JavaScript

Dies ist eine eingebaute document-Methode, die von JavaScript bereitgestellt wird und die Elementobjekte/NodeList zurückgibt, deren Selektoren mit den angegebenen Selektoren übereinstimmen. Es können auch mehrere Selektoren übergeben werden. Es gibt einen Unterschied zwischen querySelectorAll() und querySelector(). Beim ersten werden alle Objekte des übereinstimmenden Elements zurückgegeben und beim zweiten ist es ein einzelnes übereinstimmendes Element-Objekt. Wird ein ungültiger Selektor übergeben, wird ein SyntaxError ausgegeben.

Syntax

document.querySelectorAll($selectors);

Parameter

• $selectors: Es ist ein obligatorischer Parameter, der den $selectors eines HTML-Attributs angibt, das übereinstimmen muss. Mehrere Selektoren können durch Kommatrennung übergeben werden. Für zB document.querySelectorAll("p") finden Sie alle p-Tag-Elemente.

Rückgabewert

Gibt die entsprechenden DOM-Elementobjekte zurück, wenn die entsprechenden Elemente gefunden werden; andernfalls gibt es eine leere NodeList zurück.

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[type=text]');
console.log(selectors.length, selectors[0].value, selectors[1].value);

Ausgabe:

2
John
Doe

Element durch getElementsByTagName() erhalten in JavaScript

Dies ist eine eingebaute document-Methode, die von JavaScript bereitgestellt wird und die Elementobjekte/NodeList zurückgibt, deren tag mit dem angegebenen Tag-Namen übereinstimmt. Der Root-Knoten wird auch in die Suche einbezogen und Live-HTML-Sammlungen werden zurückgegeben.

Syntax

document.getElementsByTagName($name);

Parameter

• $name: Es ist ein obligatorischer Parameter, der den tagName eines HTML-Attributs angibt, das übereinstimmen muss.

Rückgabewert

Gibt das entsprechende DOM-Elementobjekt zurück, wenn die entsprechenden Elemente gefunden werden; andernfalls gibt es null zurück.

Der einzige Unterschied zwischen getElementsByTagName und querySelectorAll besteht darin, dass der erste nur Elemente auswählt, deren angegebener Tag-Name mit dem angegebenen Tag-Namen übereinstimmt. Im Gegensatz dazu kann querySelectorAll jeden Selektor verwenden, was ihm viel mehr Flexibilität und Leistung verleiht.

Außerdem gibt getElementsByTagName eine Live-Knotenliste zurück, während querySelectorAll eine statische Knotenliste zurückgibt. Die Live-Knotenliste hilft, das Ergebnis zu aktualisieren, sobald sich das DOM ändert, und Sie müssen die Abfrage nicht auslösen.

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 inputs = document.getElementsByTagName('input');

for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].type.toLowerCase() == 'text') {
    console.log(inputs[i].value);
  }
}

Ausgabe:

John
Doe