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 !

**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+

**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+

**G3offr3y** · 08/07/2010, 16h21

On m'a proposé une solution avec jquery

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<html>
<head>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
    <title>Test</title>
 
    <script language="javascript" type="text/javascript">
    function toggleDivs(element, direction) {
        otherDiv = null;
        if (direction == "next") {
            otherDiv = $(element).next("div");
        } else {
            otherDiv = $(element).prev("div");
        }
        $(element).toggle();
        $(otherDiv).toggle();
    }
 
        function updateValue(element, value)
        {
        prevDiv = $(element).parent("div");
        $(prevDiv).prev("div").html(value);
            toggleDivs(prevDiv, "prev");
        }
 
    </script>
</head>
<body>
 
    <!-- DEBUT SNIPPET -->
        <div id="div1" style="margin:20px;border:1px solid #555;cursor:pointer;display:block;" onclick="toggleDivs(this, 'next')" >
            Cliquez pour choisir une valeur
        </div>
 
        <div id="div2" style="margin:20px;border:1px solid #CCC;display:none;">
        <a href="#" onclick="updateValue(this, 'Radio 1')">Radio 1</a>
        <a href="#" onclick="updateValue(this, 'Radio 2')">Radio 2</a>
        <a href="#" onclick="updateValue(this, 'Radio 3')">Radio 3</a>
        <a href="#" onclick="updateValue(this, 'Radio 4')">Radio 4</a>
        </div>
    <!-- FIN SNIPPET -->
 
    <!-- DEBUT SNIPPET -->
        <div id="div1" style="margin:20px;border:1px solid #555;cursor:pointer;display:block;" onclick="toggleDivs(this, 'next')" >
            Cliquez pour choisir une valeur
        </div>
 
        <div id="div2" style="margin:20px;border:1px solid #CCC;display:none;">
        <a href="#" onclick="updateValue(this, 'Radio 1')">Radio 1</a>
        <a href="#" onclick="updateValue(this, 'Radio 2')">Radio 2</a>
        <a href="#" onclick="updateValue(this, 'Radio 3')">Radio 3</a>
        <a href="#" onclick="updateValue(this, 'Radio 4')">Radio 4</a>
        </div>
    <!-- FIN SNIPPET -->
 
    <!-- DEBUT SNIPPET -->
        <div id="div1" style="margin:20px;border:1px solid #555;cursor:pointer;display:block;" onclick="toggleDivs(this, 'next')" >
            Cliquez pour choisir une valeur
        </div>
 
        <div id="div2" style="margin:20px;border:1px solid #CCC;display:none;">
        <a href="#" onclick="updateValue(this, 'Radio 1')">Radio 1</a>
        <a href="#" onclick="updateValue(this, 'Radio 2')">Radio 2</a>
        <a href="#" onclick="updateValue(this, 'Radio 3')">Radio 3</a>
        <a href="#" onclick="updateValue(this, 'Radio 4')">Radio 4</a>
        </div>
    <!-- FIN SNIPPET -->
 
 
</body>
</html>

Par contre mon boss maintient que c'est possible à faire sans id.

**E.Bzz** · 08/07/2010, 16h26

Envoyé par G3offr3y

Par contre mon boss maintient que c'est possible à faire sans id.

Evidemment que c'est possible !

La vrai question est de savoir si c'est souhaitable (on peut comprendre que le boss s'en foute : c'est pas lui qui aura à débugger ou maintenir

).

La solution JQuery n'est qu'un enrobage (oui, les librairies ne sont que des "enrobages" de solutions réalisables "à la main"

) d'une solution déjà donnée : getElementsByTagName() ...
Mais solution tout à fait acceptable, bien sûr.

EDIT : il faut espérer que ton XML ne soit pas trop volumineux, car tu risques de rencontrer des problèmes de performance : que ce soit avec ou sans JQuery, la solution getElementsByTagName() oblige à parcourir toute la structure de la page à chaque fois qu'on accède à un élément. L'accès via l'id, lui, est direct.
La comparaison peut être faite avec une BDD :

getElementsByTagName() parcours de tous les enregistrements jusqu'à trouver le bon.
getElementById() accès direct via l'index de la table

S'il y a 10 lignes (ou 1000), pas de problème,
S'il y en a 10 000 000 le projet part à la poubelle ...

A+

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

Bon les IHM sont assez simple, donc le document n'est vraiment pas grand.

Et question : quand on parcours avec getElementsByTagName(), comment savoir qu'on tombe sur l'élément souhaité ?

**E.Bzz** · 08/07/2010, 17h00

Envoyé par G3offr3y

Et question : quand on parcours avec getElementsByTagName(), comment savoir qu'on tombe sur l'élément souhaité ?

Ben en testant son id

Blague à part, c'est là que va commencer l'usine à gaz : il va falloir que tu trouves un critère permettant de les différencier à coup sûr (arf ! c'est exactement ce que fait un id).

A+

**sekaijin** · 08/07/2010, 17h00

j'avoue ne pas avoir tout lu mais

Code :

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

<a href="#" onclick="alert(this.href); return false">click</a>

le this c'est le tag sur le quel tu est tu peux donc faire ce que tu veux

Code :

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

1
2
3
<div>
<p>
<a href="#" onclick="this.parent.parent.style.display='none'; this.parent.parent.parent.firstChild.style.display='blok'; return false">click</a></p></div>

le DOM c'est un gros tas de référence il suffit de les utiliser
A+JYT

**G3offr3y** · 08/07/2010, 17h02

Merci ! Je commence à y voir plus clair

**E.Bzz** · 08/07/2010, 17h05

Code :

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

this.parent.parent.parent.firstChild.style.display='blok';

Envoyé par sekaijin

le DOM c'est un gros tas de référence il suffit de les utiliser

Oui, mais sur une structure générée en dynamique, elle va être coton à générer l'instruction (sans compter les écarts entre les nav dès qu'on descend dans l'arborescence)

A+

**Watilin** · 08/07/2010, 17h39

Quand je vois ceci :

Code html :

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

1
2
3
4
<a href="#" onclick="updateValue(this, 'Radio 1')">Radio 1</a>
<a href="#" onclick="updateValue(this, 'Radio 2')">Radio 2</a>
<a href="#" onclick="updateValue(this, 'Radio 3')">Radio 3</a>
<a href="#" onclick="updateValue(this, 'Radio 4')">Radio 4</a>

je me dis que tu n’auras peut-être pas besoin d’identifier tes éléments, si tu n’utilises que leur contenu. À la sauce du innerHTML proposé plus haut, sauf que j’aime pas innerHTML.

Code html :

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

1
2
3
4
<a href="#" onclick="updateValue(this, this.firstChild.data)">Radio 1</a>
<a href="#" onclick="updateValue(this, this.firstChild.data)">Radio 2</a>
<a href="#" onclick="updateValue(this, this.firstChild.data)">Radio 3</a>
<a href="#" onclick="updateValue(this, this.firstChild.data)">Radio 4</a>

Ou mieux :

Code html :

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

1
2
3
4
<a href="#" onclick="updateRadioValue(this)">Radio 1</a>
<a href="#" onclick="updateRadioValue(this)">Radio 2</a>
<a href="#" onclick="updateRadioValue(this)">Radio 3</a>
<a href="#" onclick="updateRadioValue(this)">Radio 4</a>

Code js :

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

1
2
3
function updateRadioValue( radio ) {
	return updateValue(radio, selectInfo(radio));
}

Où selectInfo est une fonction de sélection plus élaborée que firstChild.data.

Enfin l’idée c’est vraiment d’appeler exactement la même fonction sur chaque lien, mais cette fonction se comportera différemment en fonction du contenu du lien.

**sekaijin** · 08/07/2010, 17h52

j'ai pas dis que c'était top
pour moi y rien de mieux que le id
j'en mets partout de façon automatique et mécanique

de plus le getElementById qui était mal implémenté à l'origine (toutes premières versions) est maintenant très optimisé

enfin lorsque je construit dynamiquement quelque chose et qu'en suite j'ai besoin de le manipuler je garde les références
je ne cherche donc jamais rien ou presque

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
 
var div1 = document.createElement('DIV');
var div2 = document.createElement('DIV');
var p = document.createElement('P');
var a = document.createElement('a');
a.onclick = function () {
  this.div1.style.display='none';
  this.div2.style.display='block';
}
a.div1 = div1;
a.div2 = div2;
 
app.div1.appendChild(p);
p.appendChild(a);
 
p = document.createElement('P');
a = document.createElement('a');
a.onclick = function () {
  this.div1.style.display='block';
  this.div2.style.display='none';
}
a.div1 = div1;
a.div2 = div2;
 
app.div2.appendChild(p);
p.appendChild(a);
document.body.appendChild(app.div1);
document.body.appendChild(app.div2);

c'est franchement plus simple que d'écrire un bout ici un autre là ne rien faire correspondre et en suite chercher à relier les morceaux

franchement le code est plutôt basique si on suit le W3C
pour ceux qui trouve que c'est très verbeux il y a des lib qui font ça très bient
et sinon

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
document.HtmlTag = function(tagname, attributes, styles) {
  if (typeof(attributes) == 'undefined') {
    attributes = {};
    attributes['style'] = '';
  } else if (typeof(attributes['style']) == 'undefined') {
    attributes['style'] = '';
  }
  for (key in styles) {
    attributes['style'] = attributes['style'] + ' ' + key + ':' + styles[key] + ';';
  }
  var tag = document.createElement(tagname);
  for (key in attributes) {
    tag.setAttribute(key, attributes[key]);
  }
  if (this != document) {
    this.appendChild(tag);
  }
  tag.HtmlTag = document.HtmlTag;
  return tag
}

dans un fichier
et ensuite

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.body.HtmlTag = document.HtmlTag;
 
div1 = document.body.HtmlTag('DIV', {"class":'form', lang:'fr'}, {margin: 0});
div2 = document.body.HtmlTag('DIV', {"class":'list', lang:'fr'}, {margin: 0});
 
app.div1.HtmlTag('P').HtmlTag('a', {href:'#', div1: div1, div2: div2}).onclick = function () {
  this.div1.style.display='none';
  this.div2.style.display='block';
};
 
app.div2.HtmlTag('P').HtmlTag('a', {href:'#', div1: div1, div2: div2}).onclick = function () {
  this.div1.style.display='block';
  this.div2.style.display='none';
};

A+JYT

Alternative à getElementById ?

JavaScript

Discussions similaires

Partager

Partager