ホーム エクスプローラ ヘルプ
サインイン
bh
/
react-web-tutorial
1
0
Fork 1
ファイル 課題 1 プルリクエスト 0 Wiki
ソースを参照

MàJ section API DOM

Benoît Hubert 7 年 前
親
8a2d3efe8e
コミット
a4ea1f494a
6 ファイル変更、132 行追加、35 行削除
一括表示 差分情報を表示
  1. 1 3
      react-tuto/src/markdown/2. L'API DOM/01. Introduction : le document.md
  2. 42 12
      react-tuto/src/markdown/2. L'API DOM/02. Eléments et noeuds texte.md
  3. 47 1
      react-tuto/src/markdown/2. L'API DOM/03. Trouver un élément.md
  4. 23 0
      react-tuto/src/markdown/2. L'API DOM/04. Trouver plusieurs éléments.md
  5. 17 13
      react-tuto/src/markdown/2. L'API DOM/05. Ajouter un élément.md
  6. 2 6
      react-tuto/src/markdown/2. L'API DOM/zz.md

+ 1 - 3
react-tuto/src/markdown/2. L'API DOM/01. Introduction : le document.md
ファイルの表示 

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

+ 42 - 12
react-tuto/src/markdown/2. L'API DOM/02. Eléments et noeuds texte.md
ファイルの表示 

@@ -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>`. &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>,
 
+  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'));
 
 console.dir(document.getElementsByTagName('html'));
 
 ```
 
 ```
 
 L'objet `document`, en plus des propriétés affichées par `console.dir(document)`,
 
 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.
 
 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 ! -->

+ 47 - 1
react-tuto/src/markdown/2. L'API DOM/03. Trouver un élément.md
ファイルの表示 

@@ -1,3 +1,49 @@
 
+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
 
 On vient de voir la méthode `document.getElementsByTagName()`. D'autres méthodes
 
 semblables existent :
 
 semblables existent :
 
 * `document.getElementsByClassName()` pour récupérer **les** élément**s** auxquels
 
 * `document.getElementsByClassName()` pour récupérer **les** élément**s** auxquels
 
@@ -31,4 +77,4 @@ Ici, le noeud de texte situé directement sous la balise paragraphe contient
 
 Une balise peut contenir - ou pas - un ou des noeuds de texte. Une balise "auto-fermante" comme celle-ci n'en contient pas :
 
 Une balise peut contenir - ou pas - un ou des noeuds de texte. Une balise "auto-fermante" comme celle-ci n'en contient pas :
 
 ```html
 
 ```html
 
 <img src="image.jpg" alt="Une image" />
 
 <img src="image.jpg" alt="Une image" />
 
-```
 
+``` -->

+ 23 - 0
react-tuto/src/markdown/2. L'API DOM/04. Trouver plusieurs éléments.md
ファイルの表示 

@@ -0,0 +1,23 @@
 
+`document.getElementById()` permet de trouver le seul élément de la page qui ait l'`id` spécifié.
 
+
 
+Deux autres fonctions similaires permettent de trouver `plusieurs` éléments d'un coup :
 
+```html
 
+<h4>Technos informatiques</h4>
 
+<ul>
 
+  <li class="langage">Java</li>
 
+  <li class="langage">JavaScript</li>
 
+  <li class="systeme">Linux</li>
 
+  <li class="systeme">OS X</li>
 
+</ul>
 
+<script>
 
+var technos = document.getElementsByTagName('li');
 
+var langages = document.getElementsByClass('langage');
 
+var systemes = document.getElementsByClass('systeme');
 
+console.log(technos, langages, systemes);
 
+</script>
 
+```
 
+
 
+<blockquote>
 
+Les méthode <code>getElementsByTagName()</code> et <code>getElementsByClass()</code> permettent
 
+de trouver plusieurs éléments, par leur nom de balise et par leur attribut <code>class</code> respectivement.
 
+</blockquote>

+ 17 - 13
react-tuto/src/markdown/2. L'API DOM/05. Ajouter un élément.md
ファイルの表示 

@@ -1,22 +1,26 @@
 
-On va ajouter un élément au document grâce à la méthode `createElement()` qui prend
 
-en argument un nom de balise HTML (`div`, `p`, `img`, etc.).
 
+La méthode `document.createElement()` crée un élément, dont le type est indiqué par un nom de balise passé en argument (`div`, `p`, etc.).
 
 
 
 Cet exemple est adapté de la [doc de cette fonction](https://developer.mozilla.org/fr/docs/Web/API/Document/createElement).
 
 Cet exemple est adapté de la [doc de cette fonction](https://developer.mozilla.org/fr/docs/Web/API/Document/createElement).
 
+
 
 ```javascript
 
 ```javascript
 
 var nouveauDiv = document.createElement("div");
 
 var nouveauDiv = document.createElement("div");
 
 var nouveauContenu = document.createTextNode("Salutations !");
 
 var nouveauContenu = document.createTextNode("Salutations !");
 
 nouveauDiv.appendChild(nouveauContenu);
 
 nouveauDiv.appendChild(nouveauContenu);
 
 
 
-var body = document.getElementsByTagName("body")[0];
 
+var body = document.body;
 
 body.appendChild(nouveauDiv);
 
 body.appendChild(nouveauDiv);
 
 ```
 
 ```
 
-Remarque l'utilisation de `[0]` sur la ligne où on récupère le `body` : nécessaire,
 
-car pour rappel, `getElementsByTagName()` renvoie un <em>tableau</em> d'éléments.
 
-
 
-Dans l'ordre on a :
 
-<ol>
 
-  <li>Créé un élément `div`. &Agrave; ce stade la div existe, mais n'est située nulle part dans l'arborescence HTML.</li>
 
-  <li>Créé un noeud de texte. Idem : le noeud existe mais n'est associé à aucun élément.</li>
 
-  <li>Ajouté le noeud de texte au `div`.</div>
 
-  <li>Ajouté le `div` au corps du document HTML.
 
-</ul>
 
+
 
+La première ligne crée un `div` via `document.createElement()`. Mais elle est vide !
 
+
 
+On crée donc un noeud de texte grâce à `document.createTextNode()`. Mais le noeud ainsi créé n'est associé à rien.
 
+
 
+Pour l'ajouter au div, on utilise `element.appendChild()` qui ajoute un noeud passé en argument (un noeud texte **ou** un élément), à
 
+l'`element` sur lequel elle est appelée. Note bien qu'aux fonctions vues jusqu'ici, cette méthode est appelée sur un **élément**, et non pas sur l'objet `document`.
 
+
 
+La quatrième ligne récupère la propriété `body` du document, ce qui constitue un raccourci plus pratique que ceci :
 
+```javascript
 
+var body = document.getElementsByTagName("body")[0];
 
+```
 
+
 
+Enfin, la cinquième ligne utilise encore `element.appendChild()`, cette fois pour ajouter le `div` au `body`. C'est à ce moment-là seulement qu'il devient visible !

+ 2 - 6
react-tuto/src/markdown/2. L'API DOM/zz.md
ファイルの表示 

@@ -1,8 +1,4 @@
 
-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`.
 
+Déplie la `HTMLCollection`, 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.
 
 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`.
 
 Mais `childNodes` contient, entre `head` et `body`, un noeud `text`.
 
@@ -15,7 +11,7 @@ la balise fermante `</head>` et avant la balise ouvrante `<body>`. &Ccedil;a nou
 
 On distingue deux types de noeuds dans l'arbre du document :
 
 On distingue deux types de noeuds dans l'arbre du document :
 
 <ul>
 
 <ul>
 
   <li>Des <em>éléments</em>, qui correspondent aux balises.</li>
 
   <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),
 
+  <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>
 
   ou <em>à l'intérieur</em> d'une balise.</li>
 
 </ul>
 
 </ul>
 
 </blockquote>
 
 </blockquote>