HTMLDetailsElement.name — Eigenschaft · JavaScript-Referenz

Signatur

HTMLDetailsElement.name

Beschreibung

Die Eigenschaft name des Interfaces HTMLDetailsElement spiegelt das HTML-Attribut name eines <details>-Elements wider. Wenn du die Eigenschaft liest, erhältst du den Wert des Attributs. Wenn du sie setzt, wird das Attribut im DOM geändert.

Wichtig ist das Attribut vor allem für die Gruppenbildung: Alle <details>-Elemente mit demselben name im selben Baum (Dokument oder Shadow Root) gehören zu einer exklusiven Gruppe. Öffnest du eines davon, schließt der Browser automatisch alle anderen. So baust du ein Akkordeon ganz ohne JavaScript-Logik für das Öffnen und Schließen.

Per JavaScript nutzt du die Eigenschaft vor allem, um Gruppen zur Laufzeit zu bilden oder aufzulösen, etwa wenn Inhalte dynamisch nachgeladen werden oder wenn der Nutzer zwischen den Modi „nur ein Abschnitt offen“ und „mehrere Abschnitte offen“ umschalten soll. Mit einem leeren String hebst du die Gruppierung auf.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: der neue Gruppenname. Andere Werte werden in einen String umgewandelt. Ein leerer String bedeutet: Das Element gehört zu keiner Gruppe.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des name-Attributs. Fehlt das Attribut, ist es ein leerer String "".

Beispiele

Gruppennamen auslesen

// HTML:
// <details name="faq"><summary>Frage 1</summary>Antwort 1</details>
// <details><summary>Frage 2</summary>Antwort 2</details>

const [first, second] = document.querySelectorAll('details');
console.log(first.name);
console.log(JSON.stringify(second.name));

faq ""

Akkordeon dynamisch aufbauen

const container = document.querySelector('#faq');
const eintraege = [
  { frage: 'Versandkosten?', antwort: 'Ab 50 € versandkostenfrei.' },
  { frage: 'Rückgabe?', antwort: '30 Tage Rückgaberecht.' }
];

for (const { frage, antwort } of eintraege) {
  const details = document.createElement('details');
  details.name = 'faq-gruppe'; // alle in dieselbe exklusive Gruppe
  const summary = document.createElement('summary');
  summary.textContent = frage;
  details.append(summary, antwort);
  container.append(details);
}

console.log(container.querySelector('details').getAttribute('name'));

faq-gruppe

Zwischen exklusivem und freiem Modus umschalten

const toggle = document.querySelector('#einzeln');
const sections = document.querySelectorAll('.einstellungen details');

toggle.addEventListener('change', () => {
  for (const d of sections) {
    // Leerer String hebt die Gruppierung auf
    d.name = toggle.checked ? 'einstellungen' : '';
  }
});

Feature-Erkennung mit Fallback

const supportsExclusive = 'name' in HTMLDetailsElement.prototype;

if (!supportsExclusive) {
  // Fallback: andere Elemente der Gruppe per toggle-Event schließen
  document.addEventListener('toggle', (event) => {
    const el = event.target;
    if (!(el instanceof HTMLDetailsElement) || !el.open) return;
    const group = el.getAttribute('name');
    if (!group) return;
    document.querySelectorAll(`details[name="${CSS.escape(group)}"]`)
      .forEach((other) => { if (other !== el) other.open = false; });
  }, true); // toggle steigt nicht auf, deshalb Capture-Phase
}

console.log(supportsExclusive);

true

// Wichtig · Fallstricke

Browser-Unterstützung: Erst seit 2024 in allen großen Browsern vorhanden (Chrome/Edge 120, Safari 17.2, Firefox 130). Ältere Browser ignorieren das Attribut, dort können mehrere Elemente gleichzeitig offen sein. Prüfe die Unterstützung mit 'name' in HTMLDetailsElement.prototype.
Mehrere offen beim Laden: Tragen mehrere Elemente einer Gruppe im HTML das Attribut open, bleibt nur das erste in Dokumentreihenfolge offen.
Nachträglich gruppieren: Gibst du einem geöffneten Element per name eine Gruppe, in der schon ein anderes Element offen ist, schließt der Browser das neu hinzugefügte Element.
Geltungsbereich: Eine Gruppe gilt nur innerhalb desselben Baums. Elemente in unterschiedlichen Shadow Roots bilden auch bei gleichem Namen keine gemeinsame Gruppe. Formulare spielen dabei keine Rolle.
Beim automatischen Schließen feuert auf den betroffenen Elementen ein toggle-Event. Dieses Event steigt nicht auf (kein Bubbling). Für Delegation brauchst du daher die Capture-Phase.
Barrierefreiheit: In einem exklusiven Akkordeon lassen sich Inhalte nicht nebeneinander vergleichen, und die Suche im Browser (Strg+F) öffnet passende Abschnitte, wobei sie andere schließt. Setze die Gruppierung deshalb bewusst ein.

Siehe auch

HTMLButtonElement.name HTMLIFrameElement.name HTMLDetailsElement.open HTMLMetaElement.name HTMLTextAreaElement.name