[DOM] childNodes.length Incohérent

**Adorien** · 07/10/2010, 14h34

Bonjour,

J'ai une structure de cette forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<tbody>
<tr id="un"></tr>
<tr id="deux"></tr>
<tr id="trois"></tr>
</tbody>

Quand j'effectue un childNodes.length pour connaître le nombre d'enfant de la balise <tbody>, il me sort qu'il y en a quatre.
Quand je demande à afficher l'id du dernier enfant, il m'affiche l'id du 2nd (c'est à dire "deux" au lieu de "trois").

Quelqu'un aurait-il une idée pour résoudre cette énigme?

Merci par avance

**vermine** · 07/10/2010, 14h46

Bonjour,

Pourrions-nous avoir un peu plus de code ?
A savoir la structure complète de la table (vous n'avez pas de <td> ?) et le code qui sélectionne le childNodes.length.

**Adorien** · 07/10/2010, 14h50

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<table id="chapitre_table_1">
 <tbody id="tbodyalanoix">
  <tr id="tcha_1">
   <td>Titre du chapitre : </td>
   <td><textarea cols="50" rows="1" name="tcha_1" ></textarea></td>
   <td><input type="button" value="ajouter_chapitre" onclick="ajouter_chapitre()"></input></td>
  </tr>  
  <tr id="tr_schapitre_table_11">
  <table id="schapitre_table_11">
   <tr id="tsch_11">
    <td>Titre du sous-chapitre : </td>
    <td><textarea cols="50" rows="1" name="tsch_11"></textarea></td>
    <td><input type="button" value="ajouter_schapitre" onclick="ajouter_schapitre(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
   </tr>
   <table id="id_table_para_111">
    <tr id="para_111">
     <td>Contenu du paragraphe : </td>
     <td><textarea cols="80" rows="10" name="para_111"></textarea></td>
     <td><input type="button" value="ajouter_paragraphe" onclick="ajouter_paragraphe(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
    </tr>
   </table>
  </table>
  </tr>   
  <tr id="tr_schapitre_table_12">
  <table id="schapitre_table_12">
   <tr id="tsch_12">
    <td>Titre du sous-chapitre : </td>
    <td><textarea cols="50" rows="1" name="tsch_12"></textarea></td>
    <td><input type="button" value="ajouter_schapitre" onclick="ajouter_schapitre(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
   </tr>
   <table id="id_table_para_121">
    <tr id="para_121">
     <td>Contenu du paragraphe : </td>
     <td><textarea cols="80" rows="10" name="para_121"></textarea></td>
     <td><input type="button" value="ajouter_paragraphe" onclick="ajouter_paragraphe(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
    </tr>
   </table>
  </table>
  </tr>
  </tbody>
 </table>

Voici le code complet.
La fonction javascript que j'appelle contient ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
window.alert(document.getElementById('tbodyalanoix').childNodes.length);
window.alert(document.getElementById('tbodyalanoix').lastChild.id);

**vermine** · 07/10/2010, 15h07

J'ai exécuté votre code et il m'annonce deux lignes dans le <thead> et "tr_schapitre_table_11" comme lastChild.id.

Ce qui tombe plutôt bien vu que c'est ce qui est créé.

PS : j'ai testé sous IE7.

**Watilin** · 07/10/2010, 16h46

Tu oublies des tas de <tr> et de <td> quand tu mets des sous-tables… Les moteurs JavaScript sont balèzes quand il s’agit de compléter les trous du DOM, mais faut quand même pas pousser.

Avec le code suivant (qui passe la validation), j’obtiens 7 pour childNodes.length, ce qui est normal avec les nœuds #text.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Tbody à la noix</title>
</head>
<body>
 
<table id="chapitre_table_1">
  <tbody id="tbodyalanoix">
    <tr id="tcha_1">
      <td>Titre du chapitre : </td>
      <td><textarea cols="50" rows="1" name="tcha_1" ></textarea></td>
      <td><input type="button" value="ajouter_chapitre" onclick="ajouter_chapitre()"></input></td>
    </tr>  
    <tr id="tr_schapitre_table_11">
      <td>
        <table id="schapitre_table_11">
          <tr id="tsch_11">
            <td>Titre du sous-chapitre : </td>
            <td><textarea cols="50" rows="1" name="tsch_11"></textarea></td>
            <td><input type="button" value="ajouter_schapitre" onclick="ajouter_schapitre(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
          </tr>
          <tr>
            <td>
              <table id="id_table_para_111">
                <tr id="para_111">
                  <td>Contenu du paragraphe : </td>
                  <td><textarea cols="80" rows="10" name="para_111"></textarea></td>
                  <td><input type="button" value="ajouter_paragraphe" onclick="ajouter_paragraphe(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>   
    <tr id="tr_schapitre_table_12">
      <td>
        <table id="schapitre_table_12">
          <tr id="tsch_12">
            <td>Titre du sous-chapitre : </td>
            <td><textarea cols="50" rows="1" name="tsch_12"></textarea></td>
            <td><input type="button" value="ajouter_schapitre" onclick="ajouter_schapitre(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
          </tr>
          <tr>
            <td>
              <table id="id_table_para_121">
                <tr id="para_121">
                  <td>Contenu du paragraphe : </td>
                  <td><textarea cols="80" rows="10" name="para_121"></textarea></td>
                  <td><input type="button" value="ajouter_paragraphe" onclick="ajouter_paragraphe(this.parentNode.parentNode.parentNode.parentNode.id)"></input></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </tbody>
</table>
 
</body>
</html>