La méthode getElementById() est devenue inutile ?

**psychadelic** · 18/11/2018, 19h59

exemple

Code html :

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

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="fr">
<head><meta charset="UTF-8" /></head>
<body>
  <span id="truc">texte initial...</span>
  <script>
    truc.innerText = 'bla bla bla';
  </script>
</body></html>

et ça marche!
J'ai "rapidement et mal" cherché , je n'ai trouvé aucune new ou info sur le sujet.
l'impression d'avoir raté un train..

Est-ce LA bonne pratique et on doit abandonner la méthode getElementById ??

**Beginner.** · 18/11/2018, 20h35

Salut,

Ce point a déjà été discuté dans ce forum mais je ne sais plus où...
Cette pratique peut poser problème*, NoSmoking en avait parlé mais je ne sais plus où...

*Que se passe-t-il si l'ID correspond au nom d'une variable ? Ou si L'ID vaut "document" ou "windows" ou... ?

PS : Ailleurs on a ceci : Directly reference HTML elements... Dans lequel il y a les liens de deux autres fils...

Invité · 19/11/2018, 10h19

Bonjour,

1- il ne faut pas confondre "ce qui est possible" et "ce qui est recommandé".
Ce n'est pas parce qu'on PEUT traverser en dehors des clous qu'on DOIT le faire...

2- J'ajoute qu'à partir du moment où on laisse le programme "décider" ce qu'il doit faire, on en perd la maitrise.
D'où l'importance d'utiliser "use strict", et de toujours déclarer les variables.

N.B. En ne lisant que le titre ("La méthode getElementById() est devenue inutile ?"), j'avais plutôt pensé :
Oui, dans le sens où on peut désormais utiliser à la place querySelelector().

**psychadelic** · 19/11/2018, 12h48

Perso, je trouve que tout ce qui peut alléger le code est bienvenu, et permet d'éviter des erreurs de codage.

Donner des noms explicites au variables est vital pour la survie d'un code; voit trop souvent des choses du genre

Code :

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

1
2
3
Prix_1 =  document.getElementById("Prix_1");
Prix_2 =  document.getElementById("Prix_2");
Prix_3 =  document.getElementById("Prix_3");

alors qu'il s'agit tout simplement de Prix_Hors_Taxe, montant_TVA et Prix_net...

et franchement quel est l'intérêt d'écrire en 2 lignes ce qui peut se faire en une seule, et qui divise par 2 le risque de faute de frappe au clavier

Code :

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

1
2
Prix_Net =  document.getElementById("Prix_Net");
Prix_Net.innerText =...

en revanche, pour la minification optimisée de code, c'est pas forcément un cadeau, sauf à minifier aussi le code HTML et le code CSS...

d'ailleurs je me demande si ça existe (un tripe minifieur [html,css,js] qui puisse y réaffecter les noms de variables longues) ??

Invité · 19/11/2018, 13h33

1- Personne t'empêche d'écrire :

Code :

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

document.getElementById("Prix_Net").innerText .....

Après... tu fais comme tu veux.

2- Je ne vois pas bien le rapport entre "Donner des noms explicites" et TA question initiale...
Si tu trolles tes propres discussions...

3- Reprenons ton 1er exemple.
Si, en amont de ton code, il existe un script, un autre bout de code, perdu dans la masse de lignes de code de multiples scripts importés ou rédigés par toi, où il est écrit :

Code :

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

var truc = 'machin';

Alors ton bout de code se prend le mur...
ET t'as l'air malin, avec ton code "allégé" !

**psychadelic** · 19/11/2018, 15h26

Justement c'est pour cela que j'ai parlé de noms explicites.
(et bien sur appeler ses variables truc machin ou bidule est aussi peu explicite que Prix_1, _2.. ou pire id="window" or id="document" comme le suggère Beginner dans son premier post et auquel ma réponse des "noms explicites" faisait référence.

quand à utiliser document.getElementById("Prix_Net").innerText ok, mais quand on doit se retrouver à écrire un peu partout dans son code ces 35caratères, surtout pour utiliser au final le même nom de variable (explicite) que celui de l'Id qui lui est attribué, alors si, on allège le code de 27caracteres à chaque fois.

**CosmoKnacki** · 19/11/2018, 16h08

Envoyé par jreaux62

N.B. En ne lisant que le titre ("La méthode getElementById() est devenue inutile ?"), j'avais plutôt pensé :
Oui, dans le sens où on peut désormais utiliser à la place querySelelector().

D'un point de vue purement fonctionnel oui, mais ce n'est pas le cas du point de vue du style d'écriture, qui consiste à afficher une intention claire en utilisant la méthode la mieux adaptée au besoin (ici je veux un élément à partir de son id => j'utilise getElementById, y'a pas d'erreur de casting), ni du point de vue du travail nécessaire: getElementById renvoie un élément en passant son paramètre à un hash alors que querySelector en est encore à parser son expression pour savoir ce qu'on lui demande.
Plus généralement, si les sélecteurs css peuvent exprimer des chemins simples d'une manière qui est familière au développeurs css, on reste très loin de l'efficacité et du pouvoir expressif de libxml.

Maintenant pour en revenir à truc.innerText = 'bla bla bla', je ne l'écrirai pas pour deux raisons, la première étant celle que les autres ont déjà évoquée (le risque de télescopage avec une variable), l'autre étant qu'une propriété comme innerText ne devrait être autorisée qu'en lecture et pas en écriture. Là encore, il ne faut pas forcément succomber à toutes les facilités qu'offre un langage.

**SpaceFrog** · 19/11/2018, 16h10

J'imagine ...

Code :

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

<div id="body">

**danielhagnoul** · 22/11/2018, 11h45

Cette technique me semble hasardeuse pour des raisons déjà dites dans cette discussion.

On peut mettre un peut de discipline en commençant systématiquement un ID par "id", exemple : "idCamelCase".

Dans ce cas, le risque de collision est réduit, mais non nul avec d'autres variables et la réponse "un ID doit être unique dans la page web" est une vedette du forum.

C'est la raison pour laquelle j'utilise toujours la fonction kIDUnique();, elle est incluse dans mon fichier "https://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.8.4.js", voir mon blog

J'ai fait quelques tests, la technique fonctionne en mode strict et dans un script externe, même dans un module externe.

Code HTML :

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

<span id="idBody">texte initial...</span>

module:

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
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
    console.log(`Window load : ${new kDvjhDate()}`);
 
    // début code du test
 
    console.log(typeof idBody); // object
 
    idBody.innerText = 'bla bla bla';
 
    // fin code du test
 
    kIDUnique();
}, {
    capture: false,
    passive: true,
    once: false
});

La méthode getElementById() est devenue inutile ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager