|
|
@@ -1,18 +1,48 @@
|
|
|
-L'objet `document` contient <em>moult</em> propriétés ! Pas de panique, on aura besoin
|
|
|
-de peu d'entre elles. Pour l'instant, jette un oeil à :
|
|
|
-* Certaines propriétés aux noms explicites, comme : `forms`, `links`, `scripts` qui
|
|
|
-référencent respectivement les formulaires, liens, et scripts présents dans le document.
|
|
|
-Ici les deux premiers sont vides, mais logiquement, `scripts` contient un élément.
|
|
|
-* La propriété `children`, pour laquelle est indiquée le type `HTMLCollection` : elle contient les <em>descendants directs</em> de `document` : ici, un seul élement, créé via la balise `<html>`.
|
|
|
-* La propriété `childNodes` est similaire mais subtilement différente. On va détailler cela à partir d'un autre exemple, que tu peux ajouter au script.
|
|
|
-
|
|
|
-```javascript
|
|
|
+L'objet `document` contient de <em>nombreuses</em> propriétés, mais pour l'instant on s'occupe de :
|
|
|
+<!-- * Certaines propriétés aux noms explicites, comme : `forms`, `links`, `scripts` qui
|
|
|
+référencent respectivement les formulaires, liens, et scripts présents dans le document. -->
|
|
|
+* `children`, pour laquelle est indiquée le type `HTMLCollection` : elle contient les <em>descendants directs</em> de `document` : ici, un seul élement, créé via la balise `<html>`.
|
|
|
+* `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 <em>presque</em> 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 `</head>` et avant la balise ouvrante `<body>`. Ça nous amène à l'explication...
|
|
|
+
|
|
|
+<blockquote>
|
|
|
+On distingue deux types de noeuds dans l'arbre du document :
|
|
|
+<ul>
|
|
|
+ <li>Des <em>éléments</em>, qui correspondent aux balises.</li>
|
|
|
+ <li>Des <em>noeuds texte</em>, qui sont du contenu textuel situé <em>entre deux balises</em>,
|
|
|
+ ou <em>à l'intérieur</em> d'une balise.</li>
|
|
|
+</ul>
|
|
|
+Donc, <code>children</code> contient <em>seulement</em> les éléments enfants, alors que <code>childNodes</code> contient <em>en plus</em> les noeuds textes.
|
|
|
+</blockquote>
|
|
|
+
|
|
|
+Remarque : certains éléments ne peuvent pas avoir de descendants ! C'est le cas par exemple de `<br>` (saut de ligne),
|
|
|
+et de `<img src="" />` qui est une balise "auto-fermante".
|
|
|
+
|
|
|
+
|
|
|
+<!-- cela à partir d'un autre exemple, que tu peux ajouter au script. -->
|
|
|
+
|
|
|
+<!-- ```javascript
|
|
|
console.dir(document.getElementsByTagName('html'));
|
|
|
```
|
|
|
L'objet `document`, en plus des propriétés affichées par `console.dir(document)`,
|
|
|
a aussi de nombreuses méthodes qui, elles, ne sont pas affichées.
|
|
|
|
|
|
-`getElementsByTagName`, comme son nom l'indique, permet de récupérer les éléments du
|
|
|
-documents à partir de leur nom de balise (`html`, `div`, `img`, etc.).
|
|
|
+`getElementsByTagName()` permet de récupérer les éléments du
|
|
|
+document à partir de leur nom de balise (`html`, `div`, `img`, etc.).
|
|
|
+
|
|
|
+Avant de déplier, on voit que `getElementsByTagName` nous a renvoyé une `HTMLCollection` :
|
|
|
+le même type que la propriété `children` de `document`: un ensemble d'éléments HTML.
|
|
|
+Ici on en a qu'un car n'y a qu'une balise `<html>` dans un document valide.
|
|
|
|
|
|
-Page suivante !
|
|
|
+Page suivante ! -->
|
