Element.children — Eigenschaft · JavaScript-Referenz

Signatur

get Element.children

Beschreibung

Element.children gibt eine lebendige HTMLCollection zurück. Sie enthält nur die direkten Kind-Elemente eines Elements. Text-, Kommentar- und Leerraumknoten sind nicht dabei. Das ist der wichtigste Unterschied zu Node.childNodes: Diese Eigenschaft liefert alle Knotentypen, also auch Zeilenumbrüche aus dem HTML-Quelltext.

Die Sammlung ist lebendig, sie bildet also immer den aktuellen Zustand des DOM ab. Fügt man ein Kind hinzu oder entfernt eines, ändern sich sofort length und die Indizes. Man greift per Index (children[0]), über item() oder über namedItem() auf die Einträge zu. namedItem() sucht nach id oder name.

Typische Anwendungsfälle sind das Durchlaufen von Listeneinträgen, Tabellenzeilen oder Kacheln, das Zählen von Kind-Elementen und der Zugriff auf das erste oder letzte Element. Für die beiden letzten Fälle gibt es auch die Abkürzungen firstElementChild und lastElementChild.

Rückgabewert

Typ

HTMLCollection

Beschreibung

Lebendige, geordnete Sammlung der direkten Kind-Elemente in Dokumentreihenfolge. Hat das Element keine Kind-Elemente, ist sie leer (length === 0). Der Wert ist nie null.

Beispiele

Kind-Elemente zählen und durchlaufen

// <ul id="menu">
//   <li>Start</li>
//   <li>Blog</li>
//   <li>Kontakt</li>
// </ul>
const menu = document.getElementById('menu');

console.log(menu.children.length);   // nur Elemente
console.log(menu.childNodes.length); // inkl. Leerraum-Textknoten

for (const item of menu.children) {
  console.log(item.textContent);
}

3 7 Start Blog Kontakt

Array-Methoden nutzen

const menu = document.getElementById('menu');

// HTMLCollection hat kein map/filter – daher erst in ein Array umwandeln
const labels = Array.from(menu.children, (li) => li.textContent.trim());
console.log(labels);

const active = [...menu.children].find((li) => li.textContent === 'Blog');
active?.classList.add('active');

["Start", "Blog", "Kontakt"]

Fallstrick: Entfernen in einer lebendigen Sammlung

const list = document.getElementById('menu');

// FALSCH: Durch jedes Entfernen verschieben sich die Indizes, jedes zweite Element bleibt übrig
// for (let i = 0; i < list.children.length; i++) list.children[i].remove();

// RICHTIG: rückwärts laufen ...
for (let i = list.children.length - 1; i >= 0; i--) {
  list.children[i].remove();
}

// ... oder vorher eine statische Kopie anlegen:
// [...list.children].forEach((el) => el.remove());

console.log(list.children.length);

Zugriff per Index und namedItem()

// <form id="login"><input name="user"><input name="pass" type="password"></form>
const form = document.getElementById('login');

console.log(form.children[0].name);              // erstes Kind
console.log(form.children.namedItem('pass').type); // Suche über name/id
console.log(form.children[5]);                   // Index außerhalb des Bereichs

user password undefined

// Wichtig · Fallstricke

Lebendige Sammlung: Wer beim Durchlaufen Elemente entfernt oder einfügt, verändert die Sammlung während der Schleife. Deshalb vorher mit Array.from() oder dem Spread-Operator kopieren oder rückwärts laufen.
Kein Array: HTMLCollection kennt weder forEach noch map oder filter. for...of funktioniert dagegen in allen modernen Browsern.
Nur direkte Kinder: Enkel und tiefer liegende Nachfahren sind nicht enthalten. Für diese nimmt man querySelectorAll(), das allerdings eine statische NodeList liefert.
Schreibgeschützt: Eine Zuweisung an children hat keine Wirkung. Kinder ändert man mit append(), replaceChildren() oder remove().
Template-Inhalte: Bei <template> liegen die Kinder in template.content.children, nicht in template.children.
Kompatibilität: Wird von allen modernen Browsern unterstützt. children gibt es auch auf Document und DocumentFragment (über das ParentNode-Mixin). Ältere Internet-Explorer-Versionen haben fälschlich Kommentarknoten mitgezählt.

Siehe auch

Node.childNodes Element.childElementCount Element.firstElementChild Element.lastElementChild HTMLCollection Element.querySelectorAll() Element.replaceChildren()