[DOM] hasChildNodes(); removeAttribute(), setattribute()

Version imprimable

bonjour à tous, j'ai un souci de compréhension, je pense, du modèle DOM.

Voilà, j'ai une page web dans laquelle se trouve des images(tjrs la meme) que je souhaiterai modifier quand l'utilisateur appuiera sur un bouton. J'essaie donc d'effacer l'attribut src de mon image et de la changer par une autre. L'ennui c'est que l'image ne se change pas et je ne comprends pas pourquoi car je n'ai pas de message d'erreur dans ma console firebug.

sauriez vous me dire pourquoi?

Code:

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
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
<script language="javascript" type="text/javascript">
    function effaceimage(){
        var node = document.getElementById("image");
        while (node.hasChildNodes()) {
            node.removeAttribute("src");
            node.setAttribute("src", "./image/ajax-loader.gif");
        }
    }
</script>
</head>
<body>
    <div >
        <table>
            <tr>
                <td>
                    web-tv
                </td>
                <td>
                    <img id="image" src="./image/stop.jpg" alt="image1 non afficher" />
                </td>
<tr>
                <td>
                    SNET-TV
                </td>
                <td>
                     <img id="image" src="./image/stop.jpg"  alt="image4 non afficher" />
                </td>
            </tr>
        </table>
    </div>
    <form>
         <input type="button" value="effacer image" onClick="javascript:effaceimage();" />
    </form>
 
    </body>
</html>

Salut;

et comme ça ?

Code:

1
2
3
4
5
6
7
    function effaceimage(){
        var nodes = document.getElementsByTagName("img");
        for (var i=0, imax=nodes.length; i<imax; i++) {
            nodes[i].removeAttribute("src");
            nodes[i].setAttribute("src", "./image/ajax-loader.gif");
        }
    }

15/12/2008, 15h02
turican2

dans ce cas là oui ça fonctionne parfaitement. L'ennui c'est si je veux discriminer une image dans ce cas forcement ça ne fonctionne plus comme voulu.

merci pour cette solution.
15/12/2008, 15h29
franculo_caoulene

Il suffit de tester l'attribut ou alors les classes CSS peuvent aussi servir à ça.

Évidement ça remplaçait l'image de ma bannière :-)

mais en faite et je ne savais pas on peut completement affiner sa zone de selection:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var section= document.getElementById("maSection"); var nodes = section.getElementsByTagName("img"); var imax=nodes.length; for (var i=0; i<imax; i++){ nodes[i].removeAttribute("src"); nodes[i].setAttribute("src", "./image/ajax-loader.gif"); } ..... <div id="section"> <img ....... /> </div>
le code que franculo_caoulene m'a donné maintenant permet de ne selectionner que les images placées dans la div nommé "section"

merci merci en tout cas :-)

Code:

1 2 nodes[i].removeAttribute("src"); nodes[i].setAttribute("src", "./image/ajax-loader.gif");
8O8O

Code:

nodes[i].src="./image/ajax-loader.gif";

15/12/2008, 19h43
turican2

certes ça fonctionne :-) mdr