String se mute en objet

**Golgotha** · 27/04/2013, 19h04

Ôyé Ôyé

Il fallait bien que ça m'arrive un jour, une situation que je ne comprends absolument pas...

Le code :

Code html :

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

<div id="test_A" >test</div>

Code javascript :

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

1
2
3
var p_id = $("#test_A").attr("id");
alert(p_id);
$('#test_A').append("<scrip" + "t" + ">alert(" + p_id + ");</"+"script>");

Alors, voilà le jsfidle.

La question : Pourquoi les deux alertes ne donne pas le même résultat ?

Question subsidiaire 1 : Pourquoi p_id deviens un objet ???!!!
Question subsidiaire 2 : comment avoir l'id en string dans le deuxième alertes.

J'avoue que là... j'ai du manquer un chapitre quelques part.

Bonne...... chance

**NoSmoking** · 27/04/2013, 19h36

Bonjour,
sans plus d'explication

Code :

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

1
2
3
4
5
6
var p_id; // doit être globale
$(window).load(function(){
  p_id = $("#test_A").attr("id");
  alert(p_id);
  $('#test_A').append("<scrip" + "t" + ">alert( p_id);</"+"script>"); // sans les guillemets fait référence à la variable
});

**danielhagnoul** · 27/04/2013, 22h31

Bonsoir

Il est mutin ce string !

Et le modérateur n'est pas dans le bon forum !

Avec un console.log() c'est beaucoup plus clair.

Code :

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

1
2
3
4
5
6
7
8
9
$( function(){
	 var p_id =  $( "#test_A" ).attr( "id" );
 
	 console.log( p_id );
 
	 $( "#test_A" ).append( '<script>console.log(' + p_id + ');<\/script>' );	
 
	 $( "#test_A" ).append( '<script>console.log("' + p_id + '");<\/script>' );						
});

donne :

Code html :

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

1
2
3
4
5
<div id="test_A">
    test
    <script>console.log(test_A);</script>
    <script>console.log("test_A");</script>
</div>

le premier script affiche toute la division dans la console, donc c'est un objet du DOM.

**Golgotha** · 28/04/2013, 12h20

Ha d'accord, bon bah la c'est plus clair.

En fait la réponse est là : http://jsfiddle.net/NBTef/5/

Un objet avec un ID en HTML, est directement accessible par sont nom en javascript, alors là, j'apprends quelques chose !

C'est bon à savoir. Merci bien

**NoSmoking** · 29/04/2013, 15h07

Attention toutefois DANGER car risque de collision

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head></head>
<body>
<div id="test_A">
Contenu de la DIV test_A
</div>
<script>
var test_A = "Chaine contenant test_A";
alert(test_A);
alert( document.getElementById('test_A').innerHTML);
</script>
</body>
</html>

**Golgotha** · 29/04/2013, 15h15

Oui, en effet.

Mais je me demande pourquoi ça a été implémenté de cette façon.

Quand on créer un objet HTML, avec un ID : Est ce une mauvaise pratique de déclarer une variable avec le même nom en JS ?

Quelqu'un aurait de la doc officiel à ce sujet ? (je vais chercher de mon coté)

**SpaceFrog** · 29/04/2013, 15h23

déjà à la base sur les anciennes versions de IE il était fortement déconseillé de nommer des id uniquement numériques car il y avait conflit avec un nommage interne des éléments DOM dans IE.
Ensuite nommer une variable avec le même nom qu'un id est en effet source de conflits.
c'est comme appeler une variable split ...

**Kaamo** · 29/04/2013, 17h33

ça fait partie des standards en plus

Voici ce que la spéc. dit si la propriété ne se trouve pas dans l'objet global window :
check de l'attribut name des éléments a, applet, area, embed, form, frameset, img, and object du DOM actif
OU check de l'attribut id de tous les éléments du DOM actif.

=> c'est censé prendre le premier qui vient. Donc, si l'objet global window ne contient pas encore la propriété 'test_A' :

Code html :

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

1
2
3
4
<form name="test_A"></form>
<div id="test_A"></div>
 
console.log(test_A); // HTMLFormElement

Code html :

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

1
2
3
4
<div id="test_A"></div>
<form name="test_A"></form>
 
console.log(test_A); // HTMLDivElement

Code html :

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

1
2
3
4
<span name="test_A"></span>
<div id="test_A"></div>
 
console.log(test_A); // HTMLDivElement

Par contre, ça ne semble pas être respecté à la lettre :

Code html :

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

1
2
3
4
<a name="test_A"></a>
<div id="test_A"></div>
 
console.log(test_A); // HTMLDivElement (Gecko et Webkit) au lieu de HTMLAnchorElement

Après avoir fouillé dans les bugzilla et cie, c'est une fonctionnalité sortie avec IE afin d'éviter au développeur d'avoir à taper document.getElementById('monId') mais simplement monId pour accéder à l'élément. De plus, les développeurs se sont servis de ça pour un fallback à un élément object plutôt que d'utiliser l'élément embed. Comme c'était utilisé par beaucoup de gros site (napster, par exemple), le grand dilemme du "j'implémente ce troll non standard ?" ou alors "je ne l'implémente pas mais je ferme la porte à tous les utilisateurs qui iront visiter des sites développés sous le format IE" ... donc j'implémente le gros troll pas beau. Firefox l'a implémenté en Quirks mode au départ, mais l'a lâché en mode standard avec Firefox 14. Même Webkit ne semble pas prêt à le passer en Quirks mode et pour finir IE a même fait une démo sur canvas en utilisant ce truc abjecte (Bien sûr, qui ne fonctionnait pas encore sur Gecko en mode standard)

Et pour finir sur l'état actuel des choses, un post de Jonas Sicking (Mozilla, participant aux spéc. du W3C) :

This is also a great example of if the spec had said something different we actually would have stood a chance of fixing this right. As things were, evangelism was impossible. Both to authors and to browser implementers.

En clair, ce n'est pas demain que ça changera pour le coup. C'est le parfait exemple de "C'est la spéc. qui s'est adaptée aux non-standards" car trop de monde utilisaient le non-standard qui est donc devenu standard !

**Golgotha** · 29/04/2013, 18h14

Super, merci pour toutes ces précisions Kaamo

Et on a enfin une vrai réponse

c'est une fonctionnalité sortie avec IE afin d'éviter au développeur d'avoir à taper document.getElementById('monId') mais simplement monId pour accéder à l'élément.

Ces développeurs, je vous jure

**NoSmoking** · 29/04/2013, 22h57

Merci Kaamo pour cette recherche et cette retranscription de référence

**SpaceFrog** · 30/04/2013, 08h41

c'est une fonctionnalité sortie avec IE

ce n'est la la faute du développeur, c'est encore un création fantaisiste d'IE !

**Kaamo** · 30/04/2013, 10h08

c'est encore un création fantaisiste d'IE !

C'est malheureusement vrai. Mais je comprends les développeurs de l'époque, quelque part ... Sans jQuery et consorts, il devait être tentant d'utiliser ce raccourci, surtout qu'IE était un monstre en part de marché de l'époque. C'était lui, le standard