[DOM] Javascript et DOM pour debutante

**vds2302** · 21/08/2007, 15h53

Re bonjour!

Je commence tout juste avec COM et j'ai un soucis! (comme c'est bizarre!)

Voici mon code:

Script:

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
 
<script language="javascript" type="text/javascript">
 
        function count(){
 
	    var tables = document.getElementsByTagName("table");
            var tr = tables[0].getElementsByTagName("tr");
 
            document.writeln(tables.length);
            document.writeln(tr.length);
 
            document.writeln(tables[0].childNodes.length);
 
        }
    </script>

html:

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
 
<body onload="count()">
    <form>
 
 
        <table>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td></td>
             </tr>
        </table>
 
    </form>
</body>

Résultat:
document.writeln(tables.length); --> 1
document.writeln(tr.length); --> 3

document.writeln(tables[0].childNodes.length); --> Rien!!!!!!

Pourquoi tables[0].childNodes.length est null?

Help

**SpaceFrog** · 21/08/2007, 16h08

COM ???

bref

Code :

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

document.getElementsByTagName('table')[0].childNodes.length

prend tout de suite les bonnes habitudes de syntaxe ...

**vds2302** · 21/08/2007, 16h12

Merci pour cette info.

Mais ça ne marche toujours pas:

document.getElementsByTagName('table')[0].childNodes.length --> rien ne s'affiche

**Tober** · 21/08/2007, 16h15

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
<html>
<head>
<style type="text/css">
 
</style>
<script>
<!--
function count(){
	var tables = document.getElementsByTagName("table");
	var tr = tables[0].getElementsByTagName("tr");
 
	alert(tables.length);
	alert(tr.length);
	alert(tables[0]['childNodes'].length);
}
-->
</script>
</head>
<body onload="count()">
    <form>
 
 
        <table>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td></td>
             </tr>
        </table>
 
    </form>
</body>
</html>

voilà ça "marche", mais j'ai pas encore réussi a interprété le résultat

[EDIT] tables[0]['childNodes'][0] contient tout l'intérieur de table, d'où le résultat...
je comprend juste pas pourquoi il a pas renvoyé 3

**LexWizard** · 21/08/2007, 16h15

à une lettre prèt

C'est le DOM

Sinon SpaceFrog je vois pas la difference entre ce qu'elle a fait et ce que tu as fais.

Code :

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

1
2
3
4
var tables = document.getElementsByTagName("table");
tables[0].childNodes.length
 
document.getElementsByTagName('table')[0].childNodes.length

Moi en local ça m'affiche 1.

Je ne peux pas t'aider sur ce coup

**vds2302** · 21/08/2007, 16h20

Merci pour vos réponses!

Oui pardon je me suis trompée entre COM et DOM

Tober, ça "marchouille" chez moi aussi: ton code me renvoit "2" au lieu de "3"!

**Tober** · 21/08/2007, 16h24

Moi j'ai une question aussi :
Pourquoi tables[0].childNodes.length = 1 alors qu'on voit bien que la table contient 3 tr

**vds2302** · 21/08/2007, 16h24

tables[0].childNodes.length me renvoit 2 aussi...

**SpaceFrog** · 21/08/2007, 16h39

il faut connaitre la strucutre d'une table ...
même si tu ne les mets pas dans ton code il y a des noeuds incontournables ...

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
<script language="javascript" type="text/javascript">
 
        function counter(){
 
	    	  var tables = document.getElementsByTagName("table");
            var trs = tables[0].getElementsByTagName("tr");
 
            var resultat= 'Nombre de tables:' + tables.length + '<br />';
            resultat+= 'Nombre de lignes:' + trs.length + '<br />';
 
            resultat+= 'Nombre de Noeuds enfants:' + tables[0].childNodes.length+ '<br />';
            resultat+= "curieusement le seul enfant est un "+ tables[0].childNodes[0].tagName             
            document.getElementById('result').innerHTML=resultat
 
 
        }
    </script>
 
</head>
 
<body onload="counter()">
    <form>
         <table>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td></td>
             </tr>
        </table>
 
    </form>
 <div id='result' > </div>   
</body>
 
 
 
</html>

Et encore je pense que tu testes sous IE ...
Sous firefox tu risque d'avoir encore d'autres surprises avec childNodes ..

**vds2302** · 21/08/2007, 16h43

Voila ce que j'obtiens:

Sous IE:
Nombre de tables:1
Nombre de lignes:3
Nombre de Noeuds enfants:1
curieusement le seul enfant est un TBODY

Sous FX:
Nombre de tables:1
Nombre de lignes:3
Nombre de Noeuds enfants:2
curieusement le seul enfant est un undefined

**Tober** · 21/08/2007, 16h45

ah ouais, c'est la folie
sous IE c'est un tbody (on pourrait dire normal car dom gère surement les tables comme ça...)
et sous FF, il me met undefined

autant dire que DOM reste plus qu'approximatif pour JavaScript

en tout cas, moi j'en ai fais avec c# (très bien et simple) et avec python (ca marche mais c'est mal foutu), et j'arrivais tjs a mes fins

mais si IE et FF ne gère pas de la même façon, j'imagine pas le casse tête pour faire programme utilisant bcp le DOM

**SpaceFrog** · 21/08/2007, 17h50

Hé bé ..; z' êtes pas très aventureux ...

il retourne undefined parceque sous firefox comme je le laissais entendre plus haut, de textNodes sont insérés un peu partout ...
et le textNode n'ap pas de tagName mais son nodeName retourne #text

voici comment explorer la structure de ton table:

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
43
<script language="javascript" type="text/javascript">
 
        function counter(){
 
	    	  var tables = document.getElementsByTagName("table");
            var trs = tables[0].getElementsByTagName("tr");
 
            var resultat= 'Nombre de tables:' + tables.length + '<br />';
            resultat+= 'Nombre de lignes:' + trs.length + '<br />';
 
            resultat+= 'Nombre de Noeuds enfants:' + tables[0].childNodes.length+ '<br />';
            for (i=0;i<tables[0].childNodes.length;i++){
            resultat+= "le child Node "+i+" est un "+ tables[0].childNodes[i].nodeName +"<br />" 
            }          
            document.getElementById('result').innerHTML=resultat
 
 
        }
    </script>
 
</head>
 
<body onload="counter()">
    <form>
         <table>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td></td>
             </tr>
        </table>
 
    </form>
 <pre id='result' > </pre>   
</body>
 
 
 
</html>

**SpaceFrog** · 21/08/2007, 17h58

Sinon sous firefox il y a une paire d'extensions pour explorer le DOM d'une page ...
ça pourra t'aider

**vds2302** · 21/08/2007, 18h03

Merci!!

Je pense pas que je vais poursuivre dans cette voie car la valeur renvoyée est 1 au lieu de 3...

je vois pas comment modifier ce problème.

Merci à tous pour votre aide!

**SpaceFrog** · 21/08/2007, 18h08

Tout ça est dans la FAQ ...

une solution très simple le nodeCleaner ...

**vds2302** · 21/08/2007, 18h31

Finalement j'ai utilisé document.getElementsByTagName('table')[0].rows et ça marche nickel

**SpaceFrog** · 21/08/2007, 18h33

si tu veux utiliser les childNodes il existe un petit code appelé nodeCleaner qui permet de se débarrasser des noeuds vides de firefox de sorte que IE et FireFox comptent le même nombre de noeuds ...

**Tober** · 22/08/2007, 08h21

Pour moi, du moment où t'es obligé de t'adapter à un navigateur, pour faire n'importe quoi, ça vaut presque pas le coup de s'y attaquer, même si le DOM est un outils vraiment super théoriquement

**SpaceFrog** · 22/08/2007, 09h12

Alors laisse tout de suite tomber le dev web Tober

**Tober** · 22/08/2007, 11h09

j'ai jamais aimé le dev web

[DOM] Javascript et DOM pour debutante

JavaScript

Discussions similaires

Partager

Partager