La méthode getElementById() est devenue inutile ?

**Beginner.** · 24/11/2018, 15h50

Envoyé par psychadelic

et qu'on le veuille ou non cette variable existe bel et bien quel que soit le navigateur (à jours en 2018) qu'on puisse utiliser.

Conclusion on à intérêt à faire gaffe aux nom des ID que l'on attribue (dans la partie HTML) sinon on risque d'éventuelles collusions dans son code JS, ou de réaffecter par erreur ces variables déjà existantes

Une collision dans ce sens c'est à vérifier mais j'en doute car je pense que dans ce cas la variable déclarée dans le code JS l'emporterait... En fait si ça se trouve il n'y aura même pas de création de variable correspondant au ID si il existe déjà une variable du même nom dans le code JS...

PS : Sinon pour ce qui est des noms de variable, fonction... Si ils sont longs ce n'est pas grave, non ? Puisqu'ils sont raccourcis à la minification ?

**psychadelic** · 24/11/2018, 17h43

Envoyé par Beginner.

je pense que dans ce cas la variable déclarée dans le code JS l'emporterait...

la réponse en testant

cas 1:

Code Javascript :

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

1
2
3
4
5
6
7
  "use strict";
  var Nv_P = document.createElement("p")
  Nv_P.id  = 'toto';
  id_Block_DIV.appendChild(Nv_P);
 
  toto.innerText = 'paragraphe toto';  // sera écrit dans le paragraphe
  console.log(typeof toto);           // --> object

cas 2:

Code Javascript :

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

1
2
3
4
5
6
7
8
9
 
  var toto = 15;
 
  var Nv_P = document.createElement("p")
  Nv_P.id  = 'toto';
  id_Block_DIV.appendChild(Nv_P);
 
  toto.innerText = 'paragraphe toto';  // ne sera pas écrit dans le paragraphe
  console.log(typeof toto);           // --> number

cas 3:

Code Javascript :

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

1
2
3
4
5
6
7
8
 "use strict";
  var toto = 15;
 
  var Nv_P = document.createElement("p")
  Nv_P.id  = 'toto';
  id_Block_DIV.appendChild(Nv_P);
 
  toto.innerText = 'paragraphe toto';  // TypeError: can't assign to property "innerText" on 15: not an object

**Beginner.** · 24/11/2018, 20h55

Merci pour les tests...
Alors ils confirment que la variable déclarée dans le code JS l'emporte...
A priori donc il n'y a pas de collision dans l'autre sens...

Même si je m'en doutais (comme déjà dit) c'est toujours bien d'avoir confirmation...

**psychadelic** · 25/11/2018, 00h42

Envoyé par NoSmoking

ben pas pour moi le sujet de départ n'est pas celui là, revoit le titre que tu as mis.

Méfie toi, les titres sont souvent trompeurs.

Je ne pense pas être le seul à abuser mes lecteurs sur la réalité d'un questionnement plus profond, et qui ne peut que s'éloigner de la formulation obligatoirement simpliste de son titre.

Par exemple:
- Les Trois Mousquetaires, d’Alexandre Dumas… ==> ils sont 4 en réalité.

- À la recherche du temps perdu, de Marcel Proust ==> il ne donne aucune recette magique qui permetrait, a minima, de retouver le temps passé à lire ses 7 volumes...

- Au-dessous du volcan, par Malcolm Lowry ==> je l'ai lu, et le héros ne touche jamais la moindre pelle pour creuser le moindre trou, ne serait-ce qu'une esquisse.

- Alcools, de Guillaume Apollinaire ==> très décevant, il n'y a aucune recette de cocktails

- Traité du zen et de l'entretien des motocyclettes, de... inutile d'en parler, le titre parle de lui même : faudra s'accrocher pour y trouver du sens, et dèjà trouver le guidon.

**psychadelic** · 03/12/2018, 02h45

et bien ce n'est pas particulièrement pour en remettre une couche,
mais j'ai trouvé une troisième méthode pour accéder directement en JS aux éléments d'une page html

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8" /></head>
<body>
  <span id="truc-bidule'">texte initial...</span>
  <script>
    "use strict"
    window['truc-bidule'].textContent = 'bla bla bla';
  </script>
</body></html>

et cela permet de différentier directement les éléments HTML des variables JavaScript, sans risque de collusion.

(ou de se contraindre à utiliser des règles d'écriture comme le préconise danielhagnoul )

Ce langage m'étonnera toujours !

(et du coup la méthode getElementById() en est presque devenue inutile

)

**Watilin** · 03/12/2018, 22h18

Envoyé par Beginner.

Merci pour les tests...
Alors ils confirment que la variable déclarée dans le code JS l'emporte...
A priori donc il n'y a pas de collision dans l'autre sens...

On peut aussi en conclure qu’un script qui s’appuie sur cette fonctionnalité n’est pas future-proof. Si je déclare une <div id="Cabbage"> et que demain les navigateurs se mettent à ajouter un objet Cabbage dans le contexte global, mon script ne marchera plus.
… Et je mettrai un certain temps à comprendre pourquoi.
… Et ça va demander pas mal de refactoring, et donc introduction potentielle de nouvelles erreurs.
Bref, c’est pas une bonne idée d’un point de vue maintenance.

Edit :

Envoyé par psychadelic

Code JS :

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

window['truc-bidule'].textContent = 'bla bla bla';

C’est deux faits simples :

1. Sur tout objet, l’accès à une propriété peut se faire soit avec la syntaxe obj.prop, soit obj['prop']. L’exception est quand le nom de la propriété contient des caractères qui ont un sens en JS, en l’occurence le -. Là on ne peut utiliser que la seconde syntaxe.

2. Toute variable globale (implicitement ou déclarée avec var) est également une propriété de window. Par exemple, si je déclare var machin dans le contexte global, je peux également y accéder via window.machin, et donc aussi window['machin']. (Note : ça ne marche pas avec let.)

La méthode getElementById() est devenue inutile ?

JavaScript

Discussions similaires

Partager

Partager