Détails sur les id [Trucs & Astuces]

**Bovino** · 27/02/2010, 16h31

Comme vous le savez, la méthode getElementById() est sensée vous renvoyer l'élément dont l'id est passé en paramètre.

Ce qui est moins connu, c'est que ce paramètre ne correspond pas obligatoirement (ni exclusivement) à l'attribut id d'un élément du DOM.

En réalité, le DTD et l'implémentation du navigateur sont libres de définir des attributs de type id !

C'est la raison pour laquelle IE et Opera considèrent l'attribut name comme étant de type id. Ceci me semble malgré tout litigieux comme interprétation, car au sens strict, cela signifie (un id devant être unique dans la page) que l'on n'a pas le droit de créer par exemple d'input radio liés...

D'autre part, cela explique peut-être (mais je n'ai pas encore trouvé plus d'info là-dessus) la difficulté d'attribuer le name dynamiquement...

Si vous avez des précisions ou des remarques à ce sujet, n'hésitez pas à nous en faire part

**SpaceFrog** · 09/03/2010, 16h09

Curieux IE implement déja un sourceIndex qui identifie l'objet de façon unique pour le DOM non?

**danielhagnoul** · 10/03/2010, 00h27

Bonsoir.

Il y a bien Firebug qui crée une division d'id _firebugConsole, mais à par cela je n'ai rien vu d'autre.

Code de test :

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
73
74
75
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family: "Bitstream Vera Serif Bold", serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			font-family: "Graublau Web", sans-serif;
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
		div#affiche {
			margin:12px;
			padding:6px;
			border:1px solid #999999;
			background-color:#FFFFFF;
			color:#000000;
		}
 
		/* TEST */
		</style>
	<script charset="CP-1252" src="../lib/jquery-1.4.2.min.js"></script>
	<script>
		$(function(){
			$("form[name='hello'] input").eq(1).attr("name", "lui");
 
			$.each($("*"), function(){
				$("#conteneur").append("<p>" + $(this)[0] + ", id = " + this.id + ", name = " + this.name + "</p>");
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<form name="hello">
			<input name="moi" type="text" value="oui"/>
			<input type="text" value="non"/>
		</form>
	</div>
</body>  
</html>

**nod__** · 21/03/2010, 01h33

Si on s'en tiens aux DTD, le name est un attribut CDATA (ou NAME pour les liens), mais pas ID.

Ce sont les implémenteurs qui se sont loupés ou le W3C qui n'a pas été clair.

Puis si on pousse le vice, ça veux dire que gebi() selectionnerais les label ayant leurs attribut for

C'est IE qui s'est loupé, probablement parceque le W3C a mis trop de temps a sortir sa spec qui dit que gebi doit chopper que les ID (ou que crosoft a été trop préssé de sortir le IE de l'époque). En tout cas c'est documenté. IE va chercher les attributs de type ID et NAME.

Pour ce qui est d'opera. Il a toujours plus ou moins copié IE sur les implémentations pour être compatible le plus possible.

Après on lance des mauvais intégrateurs qui utilisent des attributs dépréciés sur les élements on rajoute à ça des codeurs js qui ne lisent pas les docs et paf. On a une bonne soupe de merdouille

( edit ) Par contre dans les DTD y'a bien que les attributs id qui on le type ID.

**Bovino** · 21/03/2010, 10h50

Salut nod__

Tu as tout à fait raison dans tes arguments, mais j'ajouterais toutefois une remarque :

Envoyé par nod__

Par contre dans les DTD y'a bien que les attributs id qui on le type ID.

Certes, d'où l'importance du ET :

Envoyé par Bovino

En réalité, le DTD et l'implémentation du navigateur sont libres de définir des attributs de type id !

**nod__** · 21/03/2010, 14h17

Techniquement les implémentation ne sont pas libres, elles sont censé être conforme à la spec. D'où le terme implémentation d'ailleurs.
Pour IE on devrait dire "interprétation" :p

**sekaijin** · 02/10/2010, 20h48

c'est un peu plus subtile
un input dans IE qui possède un Name et pas d'ID se voit automatiquement affublé d'un id identique au name

mais si l'id est précisé celui-ci est utilisé.

on peut donc bien créer des groupe d'input checkBox ayant le même name mais des id différents

A+JYT
PS: plus étrange sont les attributs defaultValue et Value dans IE

**Lcf.vs** · 05/10/2010, 08h47

Difficulté d'ajouter un attribut "name" dynamiquement?

Bah, suffit de se servir de l'index de l'élément en question...

Code :

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

gebtn()[index]

**Lcf.vs** · 05/10/2010, 09h17

Ce qui est vraiment ch*ant, sous IE, c'est l'ajout dynamique de paramètres à des éléments tels que les "input" et "select" (et peut-être d'autres éléments moins usités)

Pour ce faire, on est toujours obligés de créer à l'arrache :

Code :

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

document.createElement('<'+NodeTag+' '+NodeAttributes+' />');

**sekaijin** · 05/10/2010, 12h10

que non

Code :

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

document.createElement(NodeTag);

marche très bien et setAttribute aussi.

non ce qui est chiant c'est que IE fait une différence entre attributs et propriétés
ainsi

Code :

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

document.createElement(NodeTag).setAttribute('name', 'tuc');

est différents de

Code :

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

document.createElement(NodeTag).name='tuc';

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
    <script>
     modify = function() {
        document.getElementById(15).setAttribute('name', 'bb');
     }
    </script>
  </head>
  <body onload="modify()">
    <form action="test.html" method="get">
      <input id=15 type="text" value="aa">
      <input type="submit" value="ok">
    </form>
  </body>
</html>

l'ajout d'un attribut name ne pose aucun pb ce code fonction à l'identique sur FF IF et Webkit

A+JYT

**Lcf.vs** · 05/10/2010, 12h30

Essaie toujours de définir les différents types sur un input ou un "onchange", sur un select... ^^

**Bovino** · 05/10/2010, 13h09

Envoyé par sekaijin

non ce qui est chiant c'est que IE fait une différence entre attributs et propriétés

En fait, tous les navigateurs font cette différence.
Mais pour la plupart des navigateurs, le lien entre les attributs HTML standards et leur propriété JavaScript équivalente est performant. En revanche, essaye d'ajouter des attributs / propriétés non "standard" et le lien n'existe plus (j'avais déjà fait une page de test à ce sujet : http://dmouronval.developpez.com/tes...Attributs.html).
En revanche, pour IE, le DOM n'est pas géré par JScript, ce qui pose certains problèmes (le principal étant d'avoir 2 garbage collectors qui peuvent généré des fuites de mémoire), donc le lien entre le DOM et la structure HTML est moins performant voire parfois buggé.

Envoyé par Wapper

Essaie toujours de définir les différents types sur un input ou un "onchange", sur un select... ^^

Ca ne pose pas de problème normalement

**sekaijin** · 05/10/2010, 13h18

oui je crée tous mes formulaire dynamiquement et je n'ai jamais eu de pb avec les type d'input ni avec les méthodes d'événement

le seul pb avec ie est le default value

avec tous les navigateur sauf IE si on crée dynamiquement un élément on lui fixe une valeur et on le place dans un form l'invocation de reset remet la valeur dans l'input

avec ie fixer la valeur n'est pas suffisant il faut aussi fixer le defalutvalue qui est la valeur que prends un input sur reset

pour revenir au sujet du topic
IE gère correctement les id des inputs

la seul subtilité c'est que si l'input n'a pas d'id mais un attribut name alors la valeur de cet attribut est utilisé comme id

A+JYT

**Lcf.vs** · 06/10/2010, 01h11

Bon, testé sous IETester (mode IE7), la fonction ajoutée en onchange ne s'exécute pas :

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
<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<div>
			<form id="test">
			</form>
		</div>
		<script type="text/javascript">
			function fnCreate(sTag,aAttribute,oParent,sText){
				var oConstruction=document.createElement(sTag);
				oConstruction.setAttribute(aAttribute[0],aAttribute[1]);
				if(sText!=null){
					oConstruction.innerHTML=sText;
				}
				oParent.appendChild(oConstruction);
			}
			window.onload=function(){
				fnCreate('select',['onchange','alert(1)'],document.getElementById('test'));
				fnCreate('option',['value','1'],document.getElementsByTagName('select')[0],'1');
				fnCreate('option',['value','2'],document.getElementsByTagName('select')[0],'2');
				//fnCreate('input',['type','checkbox'],document.getElementById('test'));
			}
		</script>
	</body>
</html>

Concernant la checkbox, avec la même méthode, IETester me crée bien une checkbox, pourtant, à l'époque où j'ai réalisé mon générateur DOM, j'étais sous IE7 (sous XP) et cela ne générait qu'un input aux apparences d'un input de type text.

**sekaijin** · 06/10/2010, 10h43

normal ton onchange est un string rt non une fonction

Code :

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

document.getElementById(15).onchange="alert(1)"

redéfinit la propriété onchange comme une chaîne de caractère
alors que

Code :

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

<select id="15" onChange="alert(1)">

interprété par le navigateur revient à faire

Code :

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

document.getElementById(15).onchange=function () {alert(1);}

qui est cette fois une fonction.
note au passage qu'en html l'attribut onChange prend un majucule sur le Change alors que la propriété(méthode) n'en prends pas.

à la louche pour y parvenir il te faut faire

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>
<html>
	<head>
	</head>
	<body>
		<div>
			<form id="test">
			</form>
		</div>
		<script type="text/javascript">
			function fnCreate(sTag,aAttribute,aProperty,oParent,sText){
				var oConstruction=document.createElement(sTag);
				for (key in aAttribute) {
                                   oConstruction.setAttribute(key, aAttribute[key]);
                                }
				for (key in aProperty) {
                                   oConstruction.key=aProperty[key];
                                }
				if(sText!=null){
					oConstruction.innerHTML=sText;
				}
				oParent.appendChild(oConstruction);
                                return oConstruction;
			}
			window.onload=function(){
				var select = fnCreate('select',
                                                             {}, /* pas d'attributs */
                                                             { /* methodes et propriétés */
                                                              onchange:function(){
                                                                alert(this. myProp);
                                                              },
                                                              myProp:5
                                                             },
                                                             document.getElementById('test')
                                );
				fnCreate('option',{value:1},{}, select);
				fnCreate('option',{value:2},{}, select);
				//fnCreate('input',{type:'checkbox'},{},document.getElementById('test'));
			}
		</script>
	</body>
</html>

tu peux regarder http://jeanyves.terrien.free.fr/xtDo...xtdom_debug.js et sa version compacte http://jeanyves.terrien.free.fr/xtDom/htmlxtdom.js
ton code devient (écrit sans vérif)

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
<!DOCTYPE html>
<html>
	<head>
<script type="text/javascript" src="xtDom/htmlxtdom.js">
	</head>
	<body>
		<div>
			<form id="test">
			</form>
		</div>
		<script type="text/javascript">
			document.onLoad.push(function(){
			var test = document. getExtendedElementById('test');
			test.Setect(null,null, {
			     onchange:function(){
			        alert(this. myProp);
			     },
			        myProp:5
			     })
			    .Option({value:1}).parentNode
			    .Option({value:2});
			test. InputCheckBox('label', 15)
			})
		</script>
	</body>
</html>

tu trouvera dans cette lib un méthode create (document. HtmlTag) qui reprends l'idées de la tienne et qui permet les enchaînement
plus une spécialisation pour chaque tag du HTML
les méthodes prennes les paramètres attributs, styles, propriétés
certaine comme InputCheckBox on des élément spécifique name, value, attributs, styles, propriétés

enfin les méthodes extended permettent d'avoir ces méthodes sur tous les éléments du DOM
ça rejoint l'idée de ta fonction create

mais dans ton code le pb c'est que tu mets un chaine à la place de la fonction
en javascript les méthodes onEvent quelque soit l'événement doivent être des fonctions donc
tag.onEvent = function() ....

A+JYT

**Lcf.vs** · 01/11/2010, 12h56

sekaijin> Désolé de ne répondre qu'après autant de temps mais j'ai eu qques soucis personnels...

Ta bibliothèque est bien foutue, il est vrai... mais je la trouve aussi très lourde (22Ko!).

Perso, plutôt qu'une lib DOM, j'ai opté pour la création d'un générateur DOM qui, lui, n'en pèse qu'1/10 et est capable de générer de l'HTML mais aussi du SVG.

Concernant ton exemple:

Code :

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

document.getElementById(15).onchange="alert(1)";

Tu dis que la valeur de l'attribut onchange devient une simple chaine de caractères.

Ce que je ne comprends pas, c'est pourquoi cela fonctionne avec un onclick, alors?

Enfin, les attributs HTML, tels qu'onclick, onchange, etc., sont justement faits pour y ajouter des scripts alors pourquoi les réinventer avec des "onChange", "onClick", et autres, alors que ce n'est pas valide, selon le W3C?

EDIT: De plus, avec ceci, ça fonctionne aussi:

Code :

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

document.createElement('<select onchange="alert(1)">');

**sekaijin** · 01/11/2010, 16h09

Envoyé par Wapper

sekaijin> Désolé de ne répondre qu'après autant de temps mais j'ai eu qques soucis personnels...

Ta bibliothèque est bien foutue, il est vrai... mais je la trouve aussi très lourde (22Ko!).

Perso, plutôt qu'une lib DOM, j'ai opté pour la création d'un générateur DOM qui, lui, n'en pèse qu'1/10 et est capable de générer de l'HTML mais aussi du SVG.

Concernant ton exemple:

Code :

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

document.getElementById(15).onchange="alert(1)";

Tu dis que la valeur de l'attribut onchange devient une simple chaine de caractères.

Ce que je ne comprends pas, c'est pourquoi cela fonctionne avec un onclick, alors?

Enfin, les attributs HTML, tels qu'onclick, onchange, etc., sont justement faits pour y ajouter des scripts alors pourquoi les réinventer avec des "onChange", "onClick", et autres, alors que ce n'est pas valide, selon le W3C?

EDIT: De plus, avec ceci, ça fonctionne aussi:

Code :

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

document.createElement('<select onchange="alert(1)">');

parce que lorsque tu fait un createElement avec un code HTML en paramètre
tu fais appel à l'interprète HTML qui va traduire ton code HTML en objet DOM.

l'interprète dans ton cas vas faire l'équivalent de

Code :

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

1
2
el = document.createElement('select');
el.onchange=function(){alert(1)};

il créé l'élément DOM
puis il créé la fonction js
la compile
et affecte la référence à l'élément DOM

A+JYT

**sekaijin** · 01/11/2010, 16h44

je ne citais cette lib que comme un exemple qui permet de réduire la taille de sont code.

tout est relatif 22Ko pour faire une affectation c'est lourd
mais j'ai développé une application qui fait 26 000 lignes de code Javascript
alors 22k c'est ....

ce que je voulais montrer surtout c'est qu'en utilisant le DOM on se passe souvent de recherche dans la page généré
imaginez un système d'onglets fait d'un div contenant des div
le père possède une propriété currentTab qui est une référence à l'onglet actif
chaque div fils (un onglet) possède une référence à son père : parentNode.
sa méthode onclick cache l'onglet courant sans avoir à le chercher puisque c'est t

Code javascript :

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

this.parentNode.currentTab

. puis il s'active luimême et place sa propre référence dans son père

Code javascript :

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

1
2
this.contentDiv.style.display = 'block';
this.parentNode.currentTab=this;

sans aucun id
il est tout de même possible de mettre plusieurs système d'onglet dans la page voir même de les imbriquer puisque il n'y a aucune variables et aucunes fonctions donc aucun risque de collision entre les systèmes d'onglets

un code comme celui-la est simple à concevoir mais impossible à écrire en HTML
l'approche HTML implique dans passer par une création HTML puis une modification en javascript
une approche DOM créé directement le système d'onglet

une approche intermédière permet de consilier les deux
créer le contenus des onglet en HTML

Code html :

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
      <div id="tabgroup1">
         <div id="Home">
          my home page
         </div>
         <div id="Products">
          Liste des produits
         </div>
         <div id="Services">
          &agrave; vot&apos; service m&apos;sieur
         </div>
         <div id="Support">
          D&eacute;sol&eacute; le support prend un caf&eacute;
         </div>
         <div id="Order">
          Vous pouvez me verser le somme de votre choix pourvu qu&apos;elle commence par un 1 avec beaucoup de 0.
         </div>
         <div id="News">
            <div id="tabs" style="height: 150px;">
             Cet exemple montre un contenu qui est lui même un groupe d&apos;onglets
            </div>
            <div id="News1" style="height: 150px;">
             rien de neuf sous le soleil
            </div>
            <div id="News2" style="height: 150px;">
             sous la pluie non plus
            </div>
         </div>
         <div id="About">
            Cet exemple montre un contenu qui contient un groupe d&apos;onglets
            <br />
            <div id="tabgroup2">
               <div id="About Home" style="height: 150px;">
                my home page
               </div>
               <div id="About Products" style="height: 150px;">
                Liste des produits
               </div>
               <div id="About Services" style="height: 150px;">
                &agrave; vot&apos; service m&apos;sieur
               </div>
            </div>
         </div>
      </div>

Vous remarquerez que j'ai tout de même mis des ID partout c'est une habitude. je ne vais les utiliser que pour repérer le DIV système d'onglet
les div de contenu seront géré directement pas les références

Code javascript :

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
         document.initTabs = function (div) {
            var tabgroup = document.getElementById(div);
            var ul = document.createElement('ul');
            ul.className= 'tab';
            tabgroup.insertBefore(ul, tabgroup.firstChild);
 
            ul.createTab = function (div) { //creation d'un onglet
               var li = document.createElement('li');
               var label = document.createTextNode(div.id);
               li.appendChild(label);
               li.contentDiv = div;
               li.contentDiv.className = 'tab';
               li.contentDiv.style.display = 'none';
               this.appendChild(li);
               li.onclick = function () {
                  this.parentNode.currentTab.className = null;
                  this.parentNode.currentTab.contentDiv.style.display = 'none';
                  this.className = 'current';
                  this.contentDiv.style.display = 'block';
                  this.parentNode.currentTab=this;
                  return false
               } // fin de onclick
               if (!this.currentTab) { //on fixe le premier onglet actif
                  li.className = 'current';
                  li.contentDiv.style.display = 'block';
                  this.currentTab=li;
               }
            }
 
            for (var i=0; i<tabgroup.childNodes.length; i++) { //transforme tout les div fils en onglet
               if ((tabgroup.childNodes[i].nodeType == 1)&&
                   (tabgroup.childNodes[i].tagName.toLowerCase() == 'div')) {
                  ul.createTab(tabgroup.childNodes[i]);
               }
            }
         }

La fonction recherche un div par son ID et le transforme en onglet
pour ça elle insère un ensemble de UL au dessus
pour chaque div contenu on ajoute un LI on luis affecte les références nécessaires et la méthode onclick

ensuite lors de l'usage plus aucune recherche plus besoin d'id
tout se fait directement par références
pour les programmeur C cela revient à garder dans chaque objet un pointeur sur les objets dont il a besoin.

pour créer les onglets il suffit dans onload de faire

Code javascript :

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

document.initTabs('tabgroup1');document.initTabs('tabgroup2');document.initTabs('News');

il est impossible d'ajouter une référence à un élément dans du HTML pur palier ce pb on utilise les ID
mais il faut alors à chaque appel de la méthode ayant besoin de l'objet référencé le rechercher.

il existe des lib qui font cela de façon astucieuse?
imaginez toujous mon système d'onglet créé en HTML avec des attribut parentNode et currentTab qui contiennent les id des élément en question.

la méthode onclick vas faire des getElementById pour retrouver les éléments DOM adéquat.
ces lib vont en fait définir une méthode de recherche interne qui recherche la première fois l'élément par son id et en garde une référence ainsi à l'appel suivant la méthode en question donne la référence déjà trouvé.

bref il existe de nombreuse façon d'aborder le problème. mais question efficacité il est toujours pénalisant de refaire systématiquement ce qui peut être fait une seule fois.

si je reprends mon projet de 26 000 lignes de code vous imaginez bien que pour rester fluide il vaut mieux sur un gros projet ne pas toujours tout refaire

A+JYT

Détails sur les id [Trucs & Astuces]

JavaScript

Discussions similaires

Partager

Partager