Obsolète le document.getElementById() ?

Anonyme

10 novembre 2018 à 21:59:43

Salut !

J'ai remarqué par hasard que la page web suivante fonctionne sans aucun souci (et cela m'étonne !) :

<!DOCTYPE html>
<html lang="fr">
<head>

    <meta charset="utf-8">
    <title>test</title>

    <script>
      window.onload = function()
      {
          bouton.onclick = function()
          {
              alert(message.value);
          };
      };
    </script>

</head>
<body>

    <input type="text" id="message">
    <input type="button" id="bouton" value=" Valider ">

</body>
</html>

Depuis quand les navigateurs se passent-ils de la fonction document.getElementById() ?
Est-ce une bonne pratique de coder comme dans l'exemple, ou vaut-il mieux définir proprement les variables dans son code Javascript ?

Merci !

Zoki_Marciano

11 novembre 2018 à 22:24:15

On est pas toujours obligé de passer par document.getELementById().

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Anonyme

12 novembre 2018 à 18:48:46

Qu'est-ce que tu entends par là ?

Domi65

12 novembre 2018 à 19:14:28

que document.getElementById() n'est pas du tout obsolète.

m'étonnerait que ton code fonctionne comme tu le dise.

tu peux te passer de document.getElementById() lorsque tu cible un élément de formulaire

<form name=formu>
    <input type=text name="message">
</form>

Là oui, tu peux utiliser directement le name

alert(formu.message.value)

Zoki_Marciano

12 novembre 2018 à 22:00:06

si si son code fonctionne en l'état.

Passer pour un idiot aux yeux d'un imbécile est une volupté de fin gourmet.

Lucky13

12 novembre 2018 à 22:15:56

Hello,

Pourquoi obsolète ?

Sinon on peut le remplacer ainsi via l'API Selector

var el = document.querySelector("#message").value

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Domi65

16 novembre 2018 à 18:59:39

@Zoki

« si si son code fonctionne en l'état.»

c'est vrai, mille excuses !

AliasDmc

16 novembre 2018 à 21:22:24

Bonjour LysPrintemps,

Pour moi ce script n'est pas bon. Pour récupérer l'élément par son id passer par document.getElementById()

Exemple sera plus explicite (message) :

https://codepen.io/Zonecss/pen/KrvpzB

Découvrez les Css avec la zonecss.fr

Domi65

17 novembre 2018 à 17:49:46

@AliasDmc

« Pour récupérer l'élément par son id passer par document.getElementById()»

C'est ce que je prétendais avant de m'apercevoir que le code de Lys fonctionne parfaitement

« Exemple sera plus explicite (message) :»

Oui, bien sûr que ça ne marche pas puisque tu redéfinis la propriété Windows['message'] avant l'appel aux fonctions.

Du reste, que tu puisses le définir implique qu'il existe bien !

Enfin, si avec le code de Lys, je fais

alert(window.message)

alert(window['message'])

J'obtiens chaque fois :

[object HTMLInputElement]

AliasDmc

17 novembre 2018 à 19:12:40

Bonjour Domi65,

Domi65 a écrit:

J'obtiens chaque fois :[object HTMLInputElement]

En effet faire un window['message'] ou un window.message ou message c'est idem

Pour info : si ton id est 'mes-sage' tu ne pourras pas faire un window.mes-sage ni un mes-sage tu devras faire un window['mes-sage']

Domi65 a écrit:

Oui, bien sûr que ça ne marche pas puisque tu redéfinis la propriété Windows['message'] avant l'appel aux fonctions.

C'est bien le problème. "message" peut être redéfinit à tout moment, du coup message ne pointera plus sur l'input. Alors là, ça va, y a 3 lignes de code, mais quand il y en aura plus on peut vite faire une redéfinition de message par inadvertance ...

Après, je ne fais montrer les problèmes que cela peut engendrer d'appeler l'élément ID directement par son nom et je montre aussi que que si tu prends getElementById tu es sûr de pointer toujours sur ton input

Libre aux lecteurs de choisir la technique qu'ils utiliseront.

Découvrez les Css avec la zonecss.fr

Domi65

18 novembre 2018 à 11:15:47

« je montre aussi que que si tu prends getElementById tu es sûr de pointer toujours sur ton input »

Claro que si !