HTMLFieldSetElement.elements — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLFieldSetElement.elements

Beschreibung

Die schreibgeschützte Eigenschaft elements eines <fieldset>-Elements liefert eine HTMLCollection mit allen gelisteten Formularsteuerelementen, die Nachfahren des Fieldsets sind: <button>, <fieldset>, <input>, <object>, <output>, <select>, <textarea> sowie formularassoziierte benutzerdefinierte Elemente (Custom Elements mit static formAssociated = true). Die Elemente erscheinen in Dokumentreihenfolge.

Die Eigenschaft ist praktisch, wenn man eine logische Gruppe eines Formulars gezielt bearbeiten will, etwa um alle Felder eines Abschnitts zu prüfen, zurückzusetzen, auszulesen oder einzeln zu (de)aktivieren. Anders als querySelectorAll() muss man keinen Selektor pflegen, und verschachtelte Fieldsets samt Inhalt werden automatisch mit erfasst.

Die Sammlung ist live: Wenn per DOM-Manipulation Steuerelemente hinzugefügt oder entfernt werden, ändert sich die Sammlung sofort. Über item(index), die Index-Schreibweise [i] oder namedItem(name) bzw. elements.name kommt man an einzelne Einträge, wobei der Zugriff per id oder name erfolgt.

Rückgabewert

Typ

HTMLCollection

Beschreibung

Eine live aktualisierte HTMLCollection mit allen Formularsteuerelementen im Fieldset (auch aus verschachtelten Fieldsets). Ist das Fieldset leer, ist die Sammlung leer (length === 0), aber nie null.

Beispiele

Alle Felder einer Gruppe auslesen

// HTML:
// <fieldset id="adresse">
//   <input name="strasse" value="Hauptstr. 1">
//   <input name="plz" value="10115">
//   <select name="land"><option selected>DE</option></select>
// </fieldset>

const fieldset = document.getElementById('adresse');

const daten = Object.fromEntries(
  Array.from(fieldset.elements)
    .filter((el) => el.name)
    .map((el) => [el.name, el.value])
);

console.log(fieldset.elements.length);
console.log(daten);

3 { strasse: 'Hauptstr. 1', plz: '10115', land: 'DE' }

Gruppe validieren und erstes ungültiges Feld fokussieren

const pruefeAbschnitt = (fieldset) => {
  for (const el of fieldset.elements) {
    if (typeof el.checkValidity === 'function' && !el.checkValidity()) {
      el.reportValidity();
      el.focus();
      return false;
    }
  }
  return true;
};

document.querySelector('#weiter').addEventListener('click', () => {
  const schritt1 = document.querySelector('#schritt-1');
  if (pruefeAbschnitt(schritt1)) {
    console.log('Schritt 1 gültig – weiter zu Schritt 2');
  }
});

Schritt 1 gültig – weiter zu Schritt 2

Zugriff per Name und Live-Verhalten

const fs = document.createElement('fieldset');
fs.innerHTML = '<input name="email" type="email">';

const felder = fs.elements; // live-Referenz
console.log(felder.length);           // 1
console.log(felder.email.type);       // Zugriff per name

const btn = document.createElement('button');
btn.textContent = 'Senden';
fs.append(btn);

console.log(felder.length);           // automatisch aktualisiert
console.log(felder.namedItem('gibtsnicht'));

1 email 2 null

// Wichtig · Fallstricke

Nur Steuerelemente: <label>, <legend>, <img> oder <option> sind nicht enthalten. Das verschachtelte <fieldset> selbst steht aber zusätzlich zu seinen Kindern in der Sammlung. Beim Iterieren daher auf el.name oder den Elementtyp filtern.
Kein HTMLFormControlsCollection: Anders als bei HTMLFormElement.elements ist das eine einfache HTMLCollection. namedItem() gibt bei Radio-Gruppen mit gleichem name nur das erste Element zurück, keine RadioNodeList. Für den ausgewählten Wert also fieldset.querySelector('input[name=x]:checked') verwenden.
Live-Sammlung: Wer beim Iterieren Elemente entfernt oder hinzufügt, verändert die Sammlung, während die Schleife noch läuft. In dem Fall vorher mit Array.from() eine Kopie anlegen.
Die Zugehörigkeit hängt vom DOM-Baum ab, nicht vom form-Attribut. Ein Feld mit form=\"anderesFormular\" im Fieldset steht trotzdem in der Sammlung.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird im nicht-strikten Modus einfach ignoriert und löst im strikten Modus einen TypeError aus.
Um eine ganze Gruppe zu deaktivieren, reicht fieldset.disabled = true. Die Felder einzeln über elements zu deaktivieren, ist dafür nicht nötig.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Formularassoziierte Custom Elements tauchen nur in Browsern auf, die ElementInternals unterstützen.

Siehe auch

HTMLFieldSetElement HTMLFormElement.elements HTMLCollection HTMLFormControlsCollection HTMLFieldSetElement.disabled Element.querySelectorAll() HTMLFieldSetElement.type