Element.
Une collection vivante des enfants directs d’un élément. Avec parentElement et nextElementSibling, elle sert à se déplacer dans l’arbre DOM.
- Renvoie
- Une collection vivante
HTMLCollectionavec les éléments enfants (elle peut être vide). Les autres propriétés renvoient un élément ounull.
Exemple
#const modules = document.querySelector('#modules')
const current = modules.querySelector('.current')
console.log(modules.children.length)
console.log(modules.children[0].textContent)
console.log(current.nextElementSibling.textContent)
console.log(current.parentElement)
console.log(modules.lastElementChild.nextElementSibling)Définition et utilisation
#La propriété children renvoie une collection HTMLCollection avec les enfants directs de l’élément, c’est-à-dire les éléments imbriqués un niveau plus bas. Elle ignore les nœuds de texte et les commentaires, donc les espaces et les retours à la ligne du code HTML ne posent pas de problème. Vous lisez le nombre d’enfants avec children.length, et un enfant précis par indice, par ex. list.children[0].
La collection est « vivante » : quand vous ajoutez ou retirez un enfant, le changement apparaît immédiatement dans children. Elle n’a pas de méthodes de tableau comme map() ou forEach(), mais vous la transformez facilement en tableau avec Array.from() ou [...element.children].
Toute une famille de propriétés sert à se déplacer dans l’arbre : parentElement indique le parent, firstElementChild et lastElementChild le premier et le dernier enfant, et nextElementSibling et previousElementSibling les éléments voisins au même niveau. Quand un tel élément n’existe pas, vous obtenez null.
Méfiez-vous des noms similaires sans le mot « Element » : childNodes, firstChild ou nextSibling renvoient tous les nœuds, y compris les nœuds de texte. Ce n’est généralement pas ce que vous cherchez.
Syntaxe
#element.children
element.children.length
element.children[index]
element.parentElement
element.firstElementChild
element.lastElementChild
element.nextElementSibling
element.previousElementSiblingPlus d’exemples
#const tasks = document.querySelector('#tasks')
console.log(tasks.children.length)
console.log(tasks.childNodes.length)
console.log(tasks.firstChild.nodeName)
console.log(tasks.firstElementChild.nodeName)childNodes compte aussi les trois nœuds de texte avec les retours à la ligne et les indentations entre les balises. firstChild indique le premier d’entre eux, et firstElementChild le premier élément <li>.
const ranking = document.querySelector('#ranking')
const items = ranking.children
const newPlayer = document.createElement('li')
newPlayer.textContent = 'Emma'
ranking.append(newPlayer)
console.log(items.length)
console.log([...items].map((li) => li.textContent))
console.log(typeof items.map)La variable items a été récupérée avant l’ajout d’Emma, et pourtant elle affiche trois éléments. La collection n’a pas de méthode map(), c’est pourquoi nous la transformons d’abord en tableau.
const tabs = document.querySelector('#tabs')
function move(step) {
const active = tabs.querySelector('.active')
const next =
step > 0
? active.nextElementSibling ?? tabs.firstElementChild
: active.previousElementSibling ?? tabs.lastElementChild
active.classList.remove('active')
next.classList.add('active')
console.log('Onglet actif :', next.textContent)
}
move(1)
move(1)
move(-1)Après le dernier onglet, nextElementSibling renvoie null, donc l’opérateur ?? ramène la sélection au début. Cela fonctionne de la même façon dans l’autre sens.
Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Préférez les propriétés contenant le mot « Element » (
firstElementChild,nextElementSibling). Les versions sans ce mot (firstChild,nextSibling) renvoient souvent un nœud de texte avec des espaces. - En supprimant des enfants dans une boucle sur
children, faites d’abord une copie :[...list.children]. La collection est vivante, et après chaque suppression les indices se décalent, donc une partie des éléments serait sautée. - Pour chercher un ancêtre correspondant à un sélecteur,
closest()est plus pratique que plusieursparentElementsuccessifs.
Entrées associées
#- Element.closest()Renvoie l’ancêtre le plus proche (ou l’élément lui-même) qui correspond à un sélecteur CSS, ou null.
- document.querySelectorAll()Renvoie une liste statique (NodeList) de tous les éléments qui correspondent à un sélecteur CSS.
- Element.append()Ajoute des éléments ou du texte à la fin du contenu d’un élément.
- Element.remove()Supprime un élément du document avec tout son contenu.
- Array.from()Crée un tableau à partir d’un objet itérable ou « semblable à un tableau ».
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.