On a vu comment parcourir l'arbre du document, en "descendant", via les propriétés `children`.

Mais utiliser les `children` pour trouver les éléments à partir de l'objet `document`
ne serait pas pratique ! Remplace le contenu du `body` par illustrer ça :
```html
<p>Un paragraphe</p>
<script>
var paragraphe = document
  .children[0] // récupère l'élément html
  .children[1] // récupère le body
  .children[0] // récupère le paragraphe
console.dir(paragraphe);
</script>
```
Le résultat est celui attendu, mais c'est bien compliqué, de plus ça implique qu'on sache
précisément où se trouve le paragraphe dans le `body` ! Et si on a l'idée d'ajouter
un élément avant le paragraphe, ça ne marche plus !

Heureusement, l'API DOM fournit des fonctions pour localiser des éléments dans le document.
Voici la plus simple :
```html
<p id="paragraphe">Star Wars VIII divise les fans !</p>
<script>
var paragraphe = document.getElementById('paragraphe');
console.dir(paragraphe);
</script>
```

<blockquote>
La méthode <code>getElementById()</code> appelée sur <code>document</code> retrouve l'élément avec l'attribut <code>id</code> spécifié.
</blockquote>

<!--
Repassons à des choses pratiques ! Ajoute ceci au fichier HTML :

```html
<p id="paragraphe">Du texte, <span>encore du texte</span>, une image :
<img src="img/logo-js.png" /></p>
<script>
var paragraphe = document.getElementById('paragraphe');
console.dir(paragraphe);
</script>
```



On vient de voir la méthode `document.getElementsByTagName()`. D'autres méthodes
semblables existent :
* `document.getElementsByClassName()` pour récupérer **les** élément**s** auxquels
on a donné une certaine classe CSS via l'attribut `class`.
* `document.getElementById()` pour récupérer **un** élément par son attribut `id`.

Essaie ceci dans le document HTML :
```html
<p id="paragraphe">Du texte et <span>encore du texte</span></p>
<script>
var paragraphe = document.getElementById('paragraphe');
console.log([paragraphe]);
</script>
```

Remarque : on crée un tableau avec l'élément récupéré car Chrome empêche de "déplier" un élément seul
(pas nécessaire sous Firefox).

Examine ce qu'il y a sous `children`, mais également sous `childNodes`. Il y a une petite différence.

<blockquote>
<ul>
  <li><code>children</code> contient les noeuds correspondant à des balises HTML.</li>
  <li><code>childNodes</code> contient les noeuds correspondant à des balises HTML <em>et</em> les noeuds de texte.</li>
</ul>
</blockquote>

Ici, le noeud de texte situé directement sous la balise paragraphe contient
`"Du texte et "` (visible dans la propriété `data` si tu déplies le 1er des `childNodes`).

Une balise peut contenir - ou pas - un ou des noeuds de texte. Une balise "auto-fermante" comme celle-ci n'en contient pas :
```html
<img src="image.jpg" alt="Une image" />
``` -->