[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