DocumentFragment.childElementCount — Eigenschaft · JavaScript-Referenz

Signatur

get DocumentFragment.prototype.childElementCount

Beschreibung

Die Eigenschaft childElementCount stammt aus dem Mixin ParentNode und steht damit auf DocumentFragment, Document und Element zur Verfügung. Sie liefert die Anzahl der direkten Kindknoten vom Typ Element. Das entspricht fragment.children.length.

Anders als childNodes.length zählt childElementCount keine Textknoten, also auch keine Leerzeichen und Zeilenumbrüche aus Templates, und keine Kommentare. Das ist praktisch, wenn du Fragmente aus <template>-Inhalten oder Range.createContextualFragment() prüfst. Dort entstehen oft zusätzliche Whitespace-Textknoten.

Typische Einsatzfälle:

Vor dem Einfügen prüfen, ob ein Fragment überhaupt Elemente enthält.
Sicherstellen, dass ein Template genau ein Wurzelelement hat.
Zählen, wie viele Einträge beim Stapelaufbau (Batch) einer Liste erzeugt wurden.

Der Wert ist live: Jeder Zugriff gibt den aktuellen Stand zurück. Wenn du das Fragment mit appendChild() oder append() in das Dokument einfügst, werden seine Kinder verschoben. Danach ist childElementCount des Fragments 0.

Rückgabewert

Typ

number

Beschreibung

Nicht-negative Ganzzahl mit der Anzahl der direkten Kindelemente. 0, wenn das Fragment leer ist oder nur Text- bzw. Kommentarknoten enthält.

Beispiele

Elemente in einem Fragment zählen

const fragment = new DocumentFragment();

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

// Ein Textknoten zählt nicht als Element
fragment.append('Hinweistext');

console.log(fragment.childElementCount);
console.log(fragment.childNodes.length);

3 4

Template auf genau ein Wurzelelement prüfen

const template = document.createElement('template');
template.innerHTML = `
  <article class="karte">
    <h2>Titel</h2>
  </article>
`;

const inhalt = template.content; // DocumentFragment

if (inhalt.childElementCount !== 1) {
  throw new Error('Template muss genau ein Wurzelelement haben');
}

console.log(inhalt.childElementCount);   // Whitespace wird ignoriert
console.log(inhalt.childNodes.length);  // inklusive Textknoten

1 3

Wert nach dem Einfügen ins DOM

const liste = document.createElement('ul');
document.body.append(liste);

const fragment = document.createDocumentFragment();
for (let i = 1; i <= 5; i++) {
  const li = document.createElement('li');
  li.textContent = `Eintrag ${i}`;
  fragment.appendChild(li);
}

console.log('Vorher:', fragment.childElementCount);
if (fragment.childElementCount > 0) {
  liste.appendChild(fragment); // Kinder werden verschoben
}
console.log('Nachher:', fragment.childElementCount);
console.log('Liste:', liste.childElementCount);

Vorher: 5 Nachher: 0 Liste: 5

// Wichtig · Fallstricke

Nur direkte Kinder: Verschachtelte Nachfahren werden nicht mitgezählt. Für alle Elemente im Fragment nutze fragment.querySelectorAll('*').length.
Schreibgeschützt: Eine Zuweisung wie fragment.childElementCount = 2 wird im nicht-strikten Modus stillschweigend ignoriert. Im strikten Modus löst sie einen TypeError aus, weil die Eigenschaft nur einen Getter hat.
Fragment wird geleert: Nach dem Einfügen ins DOM ist der Wert 0. Brauchst du die Anzahl später noch, speichere sie vorher in einer Variablen.
Unterschied zu childNodes.length: Whitespace aus HTML-Strings und Templates erzeugt Textknoten. Diese zählt nur childNodes mit.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Sehr alte Versionen des Internet Explorer boten die Eigenschaft nur auf Element an, nicht auf DocumentFragment. Als Ersatz dient dort fragment.children bzw. eine manuelle Zählung über childNodes mit nodeType === 1.

Siehe auch

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