|
|
@@ -1,23 +1,17 @@
|
|
|
<blockquote>
|
|
|
-Dans le navigateur, JS dispose de l'<em>API DOM</em>. Le DOM ou <em>Document
|
|
|
-Object Model</em> est la représentation, sous forme d'un "arbre", du document HTML.
|
|
|
+Dans le navigateur, JS dispose de l'<em>API DOM</em>, qui permet de manipuler le document HTML.
|
|
|
+Le DOM ou <em>Document Object Model</em> est la représentation, sous forme d'un "arbre", du document HTML.
|
|
|
</blockquote>
|
|
|
|
|
|
-Dans cet arbre, le "noeud" ou **élément** de plus haut niveau correspond à la balise `<html>`.
|
|
|
-Ce noeud "racine" a des noeuds "enfants" indiqués par `<head>` et `<body>`.
|
|
|
+La "racine" de cet arbre est accessible à JS via la variable globale `document`.
|
|
|
+Ce "noeud" racine a un "enfant" correspondant à la balise `<html>`.
|
|
|
+Celui-ci, à son tour, a des noeuds enfants correspondant à `<head>` et `<body>`...
|
|
|
+Et ainsi de suite.
|
|
|
|
|
|
-Tape ceci dans la console :
|
|
|
+On va examiner cette variable. Ajoute ceci entre les balises `<script>` (tu peux supprimer le contenu ajouté précédemment) :
|
|
|
```javascript
|
|
|
-console.log(document.getElementsByTagName('html'))
|
|
|
+console.dir(document);
|
|
|
```
|
|
|
+<small>`console.dir()` car `console.log()` sous Chrome ne montre pas les <em>propriétés</em> de l'objet `document`, qui est d'un type particulier ("classe" `HTMLDocument`).</small>
|
|
|
|
|
|
-Ici on a utilisé `getElementsByTagName()` qui permet de récupérer **tous** les noeuds
|
|
|
-correspondant à une certaine balise (tag). Il y a forcément **une seule** balise
|
|
|
-`<html>` dans un document valide, donc on obtient un tableau avec un élément.
|
|
|
-
|
|
|
-Tu dois apparaître quelque chose comme `[html]`. Clique dessus pour le "déplier".
|
|
|
-
|
|
|
-Tu peux constater que cet élément/noeud a de nombreuses propriétés, comme `innerHTML` (le contenu HTML),
|
|
|
-`style` (les propriétés CSS), et `children`. "Déplie" le contenu de cette dernière : on y
|
|
|
-on trouve logiquement les noeuds `head` et `body`. En examinant les `children` de cette façon
|
|
|
-à partir du noeud racine, on peut explorer tout l'arbre.
|
|
|
+Tu dois voir s'afficher un `#document` sous Chrome, ou `HTMLDocument` sous Firefox, avec une petite flèche sur sa gauche permettant de le "déplier".
|
