Document.children — Eigenschaft · JavaScript-Referenz

Signatur

get Document.children

Beschreibung

Document.children stammt aus dem Mixin ParentNode und gibt eine Live-HTMLCollection zurück. Sie enthält nur die direkten Kind-Knoten des Dokuments, die Elemente sind. Textknoten, Kommentare, Verarbeitungsanweisungen und der <!DOCTYPE> (ein DocumentType-Knoten) gehören nicht dazu.

Ein Dokument darf höchstens ein Wurzelelement haben. Deshalb enthält document.children in der Regel genau ein Element: bei HTML das <html>-Element, bei XML oder SVG das jeweilige Wurzelelement. Bei einem leeren Dokument, zum Beispiel aus document.implementation.createDocument(null, null), ist die Sammlung leer.

Nützlich ist die Eigenschaft vor allem für allgemeinen Code, der beliebige ParentNode-Objekte gleich behandelt (Document, DocumentFragment, Element), etwa bei rekursiven Baumdurchläufen. Wenn du nur das Wurzelelement brauchst, ist document.documentElement direkter und besser lesbar.

Weil die Sammlung „live“ ist, spiegelt sie Änderungen am DOM sofort wider. Wird das Wurzelelement entfernt oder ersetzt, ändert sich auch der Inhalt einer vorher gespeicherten Referenz auf document.children.

Rückgabewert

Typ

HTMLCollection

Beschreibung

Eine Live-HTMLCollection mit den Kind-Elementen des Dokuments, meist [html]. Die Sammlung selbst ist schreibgeschützt: Eine Zuweisung an document.children hat keine Wirkung.

Beispiele

Wurzelelement eines HTML-Dokuments ermitteln

const kinder = document.children;
console.log(kinder.length);
console.log(kinder[0].tagName);
console.log(kinder[0] === document.documentElement);

1 HTML true

Unterschied zu childNodes: Doctype und Kommentare fehlen

// Angenommenes Markup: <!DOCTYPE html><!-- Kommentar --><html>...</html>
console.log(document.childNodes.length); // Doctype, Kommentar, html
console.log(document.children.length);   // nur Elemente

for (const node of document.childNodes) {
  console.log(node.nodeType, node.nodeName);
}

3 1 10 html 8 #comment 1 HTML

Allgemeiner Baumdurchlauf über ParentNode.children

// Funktioniert für Document, DocumentFragment und Element gleichermaßen
const zaehleElemente = (parent) =>
  Array.from(parent.children).reduce(
    (summe, el) => summe + 1 + zaehleElemente(el),
    0
  );

console.log(`Elemente im Dokument: ${zaehleElemente(document)}`);

Elemente im Dokument: 42 (abhängig von der Seite)

Live-Verhalten in einem XML-Dokument

const xml = document.implementation.createDocument(null, null);
const kinder = xml.children; // Live-Referenz
console.log(kinder.length);

xml.appendChild(xml.createElement('konfiguration'));
console.log(kinder.length, kinder[0].nodeName);

0 1 konfiguration

// Wichtig · Fallstricke

Live-Sammlung: Wenn du über children iterierst und gleichzeitig Elemente entfernst oder einfügst, kann das Ergebnis unerwartet sein. Kopiere die Sammlung deshalb vorher mit Array.from() oder Spread-Syntax ([...document.children]).
Kein echtes Array: HTMLCollection hat kein forEach, map oder filter. Sie ist aber mit for...of iterierbar und lässt sich in ein Array umwandeln.
Nicht mit childNodes verwechseln: childNodes ist eine NodeList und enthält auch den Doctype-Knoten sowie Kommentare, die außerhalb von <html> stehen.
Nicht mit document.body.children verwechseln: Wer die sichtbaren Elemente der Seite sucht, braucht document.body.children, nicht document.children.
Browser-Kompatibilität: Wird von allen modernen Browsern unterstützt. Ältere Internet-Explorer-Versionen kannten children auf Document nicht, nur auf Element. Als Ausweichlösung dient dort document.documentElement.

Siehe auch

Element.children Document.fullscreen Document.hidden Document.cookie Document.dir