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

Détails sur les id [Trucs & Astuces]

JavaScript

Vue hybride

Discussions similaires

Partager

Partager