소스 검색

Renomme la section et ajoute contenu (numérotation définitive plus tard)

Benoît Hubert 7 년 전
부모
커밋
99945bc31b

+ 3 - 1
react-tuto/src/markdown/2. Manipuler le HTML/01. L'API DOM.md

@@ -14,4 +14,6 @@ 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>
 
-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".
+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".
+
+Déplie donc, et passe à la page suivante pour les explications !

+ 18 - 0
react-tuto/src/markdown/2. L'API DOM/01a.md

@@ -0,0 +1,18 @@
+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
+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.).
+
+Page suivante !

+ 21 - 0
react-tuto/src/markdown/2. L'API DOM/01b.md

@@ -0,0 +1,21 @@
+Avant de déplier, on voit que `getElementsByTagName` nous a renvoyé une `getElementsByTagName`...
+C'est du même type que la propriété `children` : un ensemble d'éléments HTML.
+Ici on en a qu'un car n'y a qu'une balise `<html>` dans un document valide.
+
+Déplie cette collection, puis son unique élément. Regarde attentivement `childNodes` et `children`.
+
+C'est 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 `</head>` et avant la balise ouvrante `<body>`. &Ccedil;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> (comme ici),
+  ou <em>à l'intérieur</em> d'une balise.</li>
+</ul>
+</blockquote>

react-tuto/src/markdown/2. Manipuler le HTML/02. Modifier un élément.md → react-tuto/src/markdown/2. L'API DOM/02. Modifier un élément.md


react-tuto/src/markdown/2. Manipuler le HTML/02. Récupérer un élément.md → react-tuto/src/markdown/2. L'API DOM/02. Récupérer un élément.md


react-tuto/src/markdown/2. Manipuler le HTML/03. Ajouter un élément.md → react-tuto/src/markdown/2. L'API DOM/03. Ajouter un élément.md


react-tuto/src/markdown/2. Manipuler le HTML/03. Quelques précautions.md → react-tuto/src/markdown/2. L'API DOM/03. Quelques précautions.md


react-tuto/src/markdown/2. Manipuler le HTML/04. Construire du HTML.md → react-tuto/src/markdown/2. L'API DOM/04. Construire du HTML.md


react-tuto/src/markdown/2. Manipuler le HTML/05. Manipuler les styles.md → react-tuto/src/markdown/2. L'API DOM/05. Manipuler les styles.md


react-tuto/src/markdown/2. Manipuler le HTML/06. Exercice.md → react-tuto/src/markdown/2. L'API DOM/06. Exercice.md