Alternative à getElementById ?

**G3offr3y** · 08/07/2010, 10h28

Bonjour,

J'ai un petit soucis. J'ai une page ou j'affiche un texte, lorsque je clique sur ce texte, je veux le masquer et afficher une liste de valeur sur laquel l'utilisateur peut cliquer pour remodifier la valeur initiale.

J'ai un programme qui fonctionne :

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
44
<html>
<head>
    <title>Test</title>
 
    <script language="javascript" type="text/javascript">
 
        function changeCssStyle(objDivID)
        {
        	switch (this.document.getElementById(objDivID).style.display) {   			
        		case 'block':
        			this.document.getElementById(objDivID).style.display = "none";
        			break;
        		case 'none':
        			this.document.getElementById(objDivID).style.display = "block";
        			break;
        	}                   
        }
 
        function updateValue(objDivID,value)
        {
        	document.getElementById(objDivID).innerHTML = value;
        }
 
    </script>
</head>
<body>
        <div id="div1" style="display:block;" >
        	<p>
        		<a id="a1" href="#" onclick="changeCssStyle('div1');changeCssStyle('div2')">
        			CLICK HERE 
        		</a>
        	</p>
        </div>
 
        <div id="div2" style="display:none;">
			<p>
				<a href="#" onclick="changeCssStyle('div1');changeCssStyle('div2');updateValue('a1','Radio 1')">Radio 1</a>
				<a href="#" onclick="changeCssStyle('div1');changeCssStyle('div2');updateValue('a1','Radio 2')">Radio 2</a>
				<a href="#" onclick="changeCssStyle('div1');changeCssStyle('div2');updateValue('a1','Radio 3')">Radio 3</a>
				<a href="#" onclick="changeCssStyle('div1');changeCssStyle('div2');updateValue('a1','Radio 4')">Radio 4</a>
			</p>
        </div>
</body>
</html>

Par contre, j'aimerais ne PAS utiliser d'id pour identifier les div à mettre à jour, utiliser par exemple plutot 'this' (ou autre chose) !

Est ce que c'est possible ? Si oui, comment ?

Merci d'avance

**Watilin** · 08/07/2010, 11h22

Oui, c’est possible, mais il faut abandonner les attributs onMachin dans la balise HTML. Il vaut mieux utiliser les propriétés dites du « DOM niveau 0 », elles te permettent d’avoir l’élément cible dans this, ainsi que l’évènement associé.

Voici un bout de code HTML un peu brutal (je mets une balise <script> dans le body, ouuuh c’est mal) pour bien comprendre :

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
<a id="lien">cliquez-moi</a>
 
<script>
document.getElementById('lien').onclick = function ( event )
{
	if (!event) { // MSIE ne fait rien comme tout le monde
		event = window.event;
	}
	var tartine = 'event: ' + event.type
		+ ' (' + event.clientX + ', ' + event.clientY + ')\n'
		+ 'element: ' + this.tagName.toLowerCase()
		+ '#' + this.id;
 
	alert(tartine);
}
</script>

**G3offr3y** · 08/07/2010, 11h35

En fait l'idée est de ne plus utiliser d'id pour identifier les balises.

**vermine** · 08/07/2010, 11h41

Des name alors ?
Il faudra bien pointer sur les bons éléments, et donc les récupérer à un moment ou un autre.

**G3offr3y** · 08/07/2010, 11h48

Avec la class ou avec le name oui, mais meme si je pense que c'est faisable, je ne vois pas comment :/

**Watilin** · 08/07/2010, 12h02

Bah t’es quand même un peu obligé, mais juste une fois, pour attacher la fonction… Imagine qu’il y ait plusieurs lien :

Code html :

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

1
2
3
<p><a id="un">clickme</a></p>
<p><a id="deux">clickme</a></p>
<p><a id="trois">clickme</a></p>

Code js :

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

1
2
3
4
5
6
function hello() {
	alert(this.id);
}
document.getElementById('un').onclick = hello;
document.getElementById('deux').onclick = hello;
document.getElementById('trois').onclick = hello;

Voilà l’idée… il faut récupérer une référence JavaScript sur l’objet, que ce soit par getElementById, getElementsByName, getElementsByTagName ou autre.

Une alternative :

Code html :

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

1
2
3
4
5
<div id="liens">
<p><a>ouane</a></p>
<p><a>tou</a></p>
<p><a>tri</a></p>
</div>

Code js :

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

1
2
3
4
5
6
7
8
9
function hello() {
	// en supposant que les liens ne contiennent que du texte
	alert(this.firstChild.data);
}
 
var aCollection = document.getElementById('liens').getElementsByTagName('a');
for (var i = 0, a; a = aCollection[i]; i++) {
	a.onclick = hello;
}

Si tu n’aimes vraiment pas les id tu peux même tenter document.getElementsByTagName('a'), mais ça va récupérer absolument tous les liens de la page : pas forcément pratique…

Voilà je donne des pistes, à toi de les explorer !

**Bovino** · 08/07/2010, 13h16

Envoyé par Watilin

Oui, c’est possible, mais il faut abandonner les attributs onMachin dans la balise HTML. Il vaut mieux utiliser les propriétés dites du « DOM niveau 0 », elles te permettent d’avoir l’élément cible dans this, ainsi que l’évènement associé.

Code :

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

<div onclick="alert(this.innerHTML)">Cliquez moi !</div>

fonctionne parfaitement...
Ou, en reprenant ton exemple :

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
<a id="lien" onclick="clicked()">cliquez-moi</a>
 
<script>
function clicked( event )
{
	if (!event) { // MSIE ne fait rien comme tout le monde
		event = window.event;
	}
	var tartine = 'event: ' + event.type
		+ ' (' + event.clientX + ', ' + event.clientY + ')\n'
		+ 'element: ' + this.tagName.toLowerCase()
		+ '#' + this.id;
 
	alert(tartine);
}
</script>

Envoyé par E.Bzz

On peut connaitre la raison ?
(sachant que c'est la méthode la plus compatible, la plus sûre, la plus rapide et - donc - la plus pratique)

Oui, j'aimerais bien aussi connaitre la raison de cette lubie un peu déconcertante

**Watilin** · 08/07/2010, 13h59

Envoyé par Bovino

Code :

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

<div onclick="alert(this.innerHTML)">Cliquez moi !</div>

fonctionne parfaitement...

Autant pour moi alors, je viens d’apprendre un truc

Par contre, on n’a pas accès à l’event…

**G3offr3y** · 08/07/2010, 14h54

Déjà, merci à tous pour vos réponses et vos pistes !

Donc je ne peux pas utiliser d'id car en fait notre outil génère dynamiquement du html à partir d'un fichier xml (qui décrit l'interface graphique), en "collant" des snippets.

C'est un de ces snippets que j'essaye de réaliser, et comme un élément graphique (par exemple un radio button) peut etre présent plusieurs fois sur une interface graphique, je ne peux pas utiliser 'id' (car id est unique)

**E.Bzz** · 08/07/2010, 15h08

Envoyé par G3offr3y

Ensemble, pas de id car en fait notre outil génère dynamiquement du html à partir d'un fichier xml (qui décrit l'interface graphique), en "collant" des snippets.

C'est un de ces snippets que j'essaye de réaliser, et comme un élément graphique (par exemple un radio button) peut etre présent plusieurs fois sur une interface graphique, je ne peux pas utiliser 'id' (car id est unique)

Merci pour ces précisions

Par contre, es-tu sûr que ça soit bloquant ?

Si ta page est gérée en dynamique (même à partir d'un XML), il doit être possible de gérer un compteur (à accoler à une "racine") pour générer des id uniques, non ?

Ça simplifierait énormément de choses (pour toi et pour les prochains à travailler sur l'outil) ...

A+

**E.Bzz** · 08/07/2010, 12h28

Bonjour et bienvenue sur nos forums

Envoyé par G3offr3y

Par contre, j'aimerais ne PAS utiliser d'id pour identifier les div à mettre à jour

On peut connaitre la raison ?

(sachant que c'est la méthode la plus compatible, la plus sûre, la plus rapide et - donc - la plus pratique)

NB :
les names ne sont valides qu'à l'intérieur d'un formulaire. Mais même ainsi, de nombreux types d'éléments (notamment les div) ne sont pas censés posséder un attribut name (sinon, erreur validation W3C).

A+

Alternative à getElementById ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager