L'objet `document` contient de nombreuses propriétés, mais pour l'instant on s'occupe de :
* `children`, pour laquelle est indiquée le type `HTMLCollection` : elle contient les descendants directs de `document` : ici, un seul élement, créé via la balise ``.
* `childNodes`, similaire mais subtilement différente.
Pour détailler cette différence, déplie `children`, puis la clé 0 sur laquelle se trouve `html`.
On trouve à nouveau `children` et `childNodes`, ce qui confirme la notion d'arborescence.
Examine-les attentivement.
Ils contiennent presque la même chose : les deux ont en commun `head` et `body` qui correspondent aux balises de même nom.
Mais `childNodes` contient, entre `head` et `body`, un noeud `text`.
Déplie le et regarde sa propriété `data` : une chaîne de 3 caractères : le symbole du retour chariot,
suivi de deux espaces. Si tu regardes dans `empty.html`, ça correspond exactement à ce qui se trouve après
la balise fermante `` et avant la balise ouvrante ``. Ça nous amène à l'explication...
On distingue deux types de noeuds dans l'arbre du document :
- Des éléments, qui correspondent aux balises.
- Des noeuds texte, qui sont du contenu textuel situé entre deux balises,
ou à l'intérieur d'une balise.
Donc, children contient seulement les éléments enfants, alors que childNodes contient en plus les noeuds textes.
Remarque : certains éléments ne peuvent pas avoir de descendants ! C'est le cas par exemple de `
` (saut de ligne),
et de `![]()
` qui est une balise "auto-fermante".