Id et getElementById

veevee · Message par **veevee** » 04 janv. 2005, 14:27

Bonjour,
je suis en train de m'échiner à comprendre comment fonctionne deux trucs :

- L'attibut Id dans un formulaire HTML
- La méthode getElementById() dans un script JS

Je crois comprendre que ces deux élements sont liés, le 2° utilisant le 1°

Un de vous peut-il me donner un exemple parlant de leurs utilisations

Merci

Bobe · Message par **Bobe** » 04 janv. 2005, 14:57

Un identifiant est par définition unique dans un contexte donné (ici, le document HTML).

Tu peux donc identifier des éléments HTML de ton document en leur assignant un attribut id dans la structure de ton document.

La méthode getElementById() ne fait rien d'autre que ce que son nom indique, elle te permet de récupèrer un élément de ton document par son identifiant (donné par son attribut id).

je n'ai pas compris ta référence aux formulaires HTML, tu peux préciser ?

Message par **Benoit** » 04 janv. 2005, 15:01

L'attribut ID peut s'appliquer à n'importe quel élément d'une page, pas seulement un champ de formulaire. Il permet simplement de l'identifier de manière unique dans le document, afin de lui appliquer un style particulier ou d'y renvoyer un lien interne. De plus, si c'est un champ de formulaire, il correspondra au nom de variable renvoyé au serveur.

La méthode getElementById() permet d'avoir accès au "nœud" de l'élément dans l'arbre DOM (une fois celui-ci construit), ce qui peut être bien pratique lorsqu'on veut en changer certaines propriétés dynamiquement (apparence, visibilité, contenu, ...).

Bobe · Message par **Bobe** » 04 janv. 2005, 15:05

Benoit a écrit :De plus, si c'est un champ de formulaire, il correspondra au nom de variable renvoyé au serveur.

Surtout pas! L'attribut id ne remplace pas l'attribut name dans le cas des commandes de formulaire. Une commande ne comportant pas d'attribut name ne verra jamais sa paire name/value passée dans les données envoyées coté serveur (et pour cause, puisqu'il n'y a alors pas d'attribut name).

Message par **Benoit** » 04 janv. 2005, 15:13

Ah oui oups je pensais aux

Code : Tout sélectionner

<a name="machin"></a>

qu'on voyait souvent mais c'est vrai que les champs de formulaires doivent toujours avoir un nom.

La question porte peut-être sur l'existence de plusieurs formulaires portant les mêmes champs dans la page et l'identification de l'un d'eux via son ID ?

veevee · Message par **veevee** » 04 janv. 2005, 17:33

Bonjour,
En fait, je crois me souvenir d'une page de formulaire ainsi bâtie :
=======================
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
function trier() {
for (ix=1;ix<=4;ix++){
instructions
gnagnagna getElementById()
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formu" ACTION="http://www.domaine.com/" METHOD=POST>
<INPUT TYPE="text" NAME="article" id=1 SIZE=40 MAXLENGTH=40>
<INPUT TYPE="text" NAME="article" id=2 SIZE=40 MAXLENGTH=40>
<INPUT TYPE="text" NAME="article" id=3 SIZE=40 MAXLENGTH=40>
<INPUT TYPE="text" NAME="article" id=4 SIZE=40 MAXLENGTH=40>
<INPUT TYPE="button" VALUE="Valider" onClick=trier()>
</FORM>
</BODY>
</HTML>

en fait j'essaaie d'apprendre à me servir de ces instructions, à très bas niveau, car ma console JS JS me lance un avertissement :
Avertissement : Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C document.getElementById() à la place.
Fichier Source : file:///D|/Mes%20documents/Mes%20sites%20Internet/la.mirandole/brouillons/TESTER-ident-browser.html
Ligne : 10

Vous comprendrez que je suis assez loin des notions de "avoir accès au "nœud" de l'élément dans l'arbre DOM" dont parle Benoit

J'essaie de comprendre, voilà tout

La vie est dure pour les neuneux

Merci

Mirovinben · Message par **Mirovinben** » 05 janv. 2005, 06:03

Bonjour Veevee

veevee a écrit :<SCRIPT LANGUAGE="JavaScript">
function trier() {
for (ix=1;ix<=4;ix++){
instructions
gnagnagna getElementById()
}

remplace getElementById() par document.getElementById(i)

veevee a écrit :<FORM NAME="formu" ACTION="http://www.domaine.com/" METHOD=POST>
<INPUT TYPE="text" NAME="article" id=1 SIZE=40 MAXLENGTH=40>
<INPUT TYPE="text" NAME="article" id=2 SIZE=40 MAXLENGTH=40>
<INPUT TYPE="text" NAME="article" id=3 SIZE=40 MAXLENGTH=40>
<INPUT TYPE="text" NAME="article" id=4 SIZE=40 MAXLENGTH=40>
<INPUT TYPE="button" VALUE="Valider" onClick=trier()>

Dans l'exemple les 4 INPUT TYPE="text" doivent avoir des NAME tous différents pour récupérer les différentes valeurs saisies et id doit être une chaîne de caractères... Donc ici id="1", etc...

Message par **pascal** » 05 janv. 2005, 06:07

avec un bémol, il est interdit d'avoir une id commençant par un chiffre, donc ici il y a une erreur de syntaxe html.

Mirovinben · Message par **Mirovinben** » 05 janv. 2005, 06:15

pascal a écrit :avec un bémol, il est interdit d'avoir une id commençant par un chiffre, donc ici il y a une erreur de syntaxe html.

autant pour moi... (ou "au temps pour moi" comme je l'ai lu ici ou là)

Pour Veevee, exemple d'utilisation du getElementById...

Supposons que quelque part j'ai un <div id="bulle"> (...) </div>

alors...

...document.getElementById("bulle").style.visibility="visible"; permet de rendre visible le bloc identifié "bulle"
...document.getElementById("bulle").style.visibility="hidden"; fait l'inverse, il le cache

nomade · Message par **nomade** » 05 janv. 2005, 08:55

[HS]

Mirovinben a écrit :autant pour moi... (ou "au temps pour moi" comme je l'ai lu ici ou là)

C'est bien "au temps pour moi", aussi bizarre que ça puisse paraître

[/HS]

Mirovinben · Message par **Mirovinben** » 06 janv. 2005, 07:41

nomade a écrit :[HS]
Mirovinben a écrit :autant pour moi... (ou "au temps pour moi" comme je l'ai lu ici ou là)
C'est bien "au temps pour moi", aussi bizarre que ça puisse paraître
[/HS]

Je suppose que celà doit venir des fanfares où le fautif doit se recaler sur le temps (=tempo)... mais je suis HS sur ce coup ! Pardon VeeVee

veevee · Message par **veevee** » 06 janv. 2005, 09:58

Bonjour,
vous êtes des gros mauvais
Autan c'est un vent, qui soufle E-W sur le seuil de Naurouze, même que ça rend les gens fous

J'en suis la preuve vivante

Trêve de billevesées :
Je jongle comme un fou avec Id et get machin

Les conseils zavisés des gros mauvais dont auxquels... ont servi à quelque chose

Soyez en remerciés

[

Geckozone

Id et getElementById

Id et getElementById

"[resolu]"

Qui est en ligne ?