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

**turican2** · 15/12/2008, 14h33

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 :

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
 
<!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>

**franculo_caoulene** · 15/12/2008, 14h57

Salut;

et comme ça ?

Code :

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

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");
        }
    }

**turican2** · 15/12/2008, 15h02

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.

**franculo_caoulene** · 15/12/2008, 15h29

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

**turican2** · 15/12/2008, 15h42

É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 :

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

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 :-)

**SpaceFrog** · 15/12/2008, 16h02

Code :

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

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

Code :

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

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager