DocumentFragment.children — Eigenschaft · JavaScript-Referenz

Signatur

DocumentFragment.children

Beschreibung

DocumentFragment.children gibt eine Live-HTMLCollection zurück, die alle direkten Kindelemente des Fragments enthält. Text-, Kommentar- und andere Nicht-Element-Knoten werden ausgelassen. Wenn du alle Knoten einschließlich Text brauchst, nimm childNodes.

Die Eigenschaft stammt aus dem ParentNode-Mixin und verhält sich deshalb genauso wie Element.children oder Document.children. Nützlich ist sie vor allem, wenn du DOM-Strukturen in einem Fragment vorbereitest, zum Beispiel aus template.content oder document.createDocumentFragment(), und sie vor dem Einfügen ins Dokument prüfen, verändern oder zählen willst.

„Live“ heißt: Die Sammlung passt sich sofort an, sobald im Fragment Elemente hinzukommen oder entfernt werden. Besonders wichtig ist das beim Einfügen des Fragments ins Dokument. Dabei werden alle Kinder verschoben, und danach ist fragment.children leer (length === 0).

Rückgabewert

Typ

HTMLCollection

Beschreibung

Eine live aktualisierte, schreibgeschützte HTMLCollection mit allen direkten Kindelementen des Fragments. Hat das Fragment keine Elemente, ist die Sammlung leer (length ist 0), aber nie null.

Beispiele

Kindelemente eines Fragments zählen

const fragment = document.createDocumentFragment();

['Äpfel', 'Birnen', 'Kirschen'].forEach((obst) => {
  const li = document.createElement('li');
  li.textContent = obst;
  fragment.append(li);
});

// Textknoten zählen nicht mit
fragment.append('Nur Text');

console.log(fragment.children.length);   // nur Elemente
console.log(fragment.childNodes.length); // alle Knoten
console.log(fragment.children[0].textContent);

3 4 Äpfel

Template-Inhalt vor dem Einfügen anpassen

// <template id="karte"><h2></h2><p></p></template>
const tpl = document.querySelector('#karte');
const fragment = tpl.content.cloneNode(true);

const [titel, text] = fragment.children;
titel.textContent = 'Willkommen';
text.textContent = 'Schön, dass du da bist.';

// Allen Elementen der obersten Ebene eine Klasse geben
for (const el of fragment.children) {
  el.classList.add('karte-teil');
}

document.body.append(fragment);

Live-Verhalten: Fragment ist nach dem Einfügen leer

const fragment = document.createDocumentFragment();
fragment.append(document.createElement('div'), document.createElement('span'));

const kinder = fragment.children; // Live-Referenz
console.log(kinder.length);

document.body.append(fragment); // Knoten werden verschoben
console.log(kinder.length);

// Statische Kopie vorher sichern:
const f2 = document.createDocumentFragment();
f2.append(document.createElement('p'));
const gesichert = Array.from(f2.children);
document.body.append(f2);
console.log(gesichert.length, gesichert[0].isConnected);

2 0 1 true

// Wichtig · Fallstricke

Live-Sammlung: Wenn du über children iterierst und dabei Elemente entfernst oder verschiebst, ändert sich die Sammlung mitten in der Schleife. Einträge werden dann übersprungen. Lege vorher mit Array.from(fragment.children) oder [...fragment.children] eine statische Kopie an.
Nach dem Einfügen leer: append(), appendChild() und ähnliche Methoden verschieben die Kinder des Fragments ins Dokument. Danach ist fragment.children.length gleich 0.
Kein Array: HTMLCollection hat kein map() oder filter() und auch kein forEach(). Mit for...of kannst du sie durchlaufen. Für Array-Methoden wandelst du sie vorher in ein Array um.
Schreibgeschützt: Eine Zuweisung an children wird ignoriert (im Strict Mode gibt es einen TypeError). Kinder änderst du über append(), replaceChildren() oder remove().
Nur Elemente der obersten Ebene: Verschachtelte Nachfahren sind nicht enthalten. Für tiefere Suchen gibt es querySelectorAll().
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der alte Internet Explorer kannte children auf DocumentFragment nicht, dort musste man childNodes nach nodeType === 1 filtern.

Siehe auch

Element.children DocumentFragment.childElementCount DocumentFragment.lastElementChild DocumentFragment.firstElementChild Document.children