Maison >interface Web >tutoriel HTML >La différence entre les attributs ID et Name de la production de pages HTML elements_HTML/Xhtml_Web

La différence entre les attributs ID et Name de la production de pages HTML elements_HTML/Xhtml_Web

WBOY
WBOYoriginal
2016-05-16 16:42:251434parcourir

Aujourd'hui, je suis un peu confus à propos de . Ajouter # signifie une ancre, suivie de 13, elle passera à la position 13 de cette page, et ce 13 est le Attribut de nom. Pourquoi
n'est-il pas une valeur d'identification ? ? ? J'ai donc vérifié la différence entre ID et Nom, et enregistré

la réponse la plus classique : ID est comme le numéro d'identification d'une personne, et Name est comme son nom ID est évidemment unique, et Name peut être répété.
Évidemment, la réponse à ID et Name est trop générale. Bien sûr, cette explication est tout à fait correcte pour ID, qui est l'identité de l'élément HTML côté client. Name est en réalité beaucoup plus compliqué, car Name a de nombreuses utilisations, il ne peut donc pas être complètement remplacé par ID, ce qui l'annule. Les utilisations spécifiques sont :
Utilisation 1 : En tant qu'indicateur côté serveur des éléments HTML qui peuvent interagir avec le serveur, tels que la saisie, la sélection, la zone de texte et le bouton. Nous pouvons obtenir la valeur soumise par l'élément via Request.Params en fonction de son nom côté serveur.
Utilisez 2 : élément HTML Type d'entrée = regroupement 'radio', on sait que le contrôle du bouton radio est dans la même classe de regroupement, l'opération de vérification est mutex, une seule radio peut être sélectionnée en même temps, ce regroupement est basé sur le même attribut Name réalisé.
Objectif 3 : Créer un point d'ancrage dans la page. Nous savons que link est destiné à obtenir un lien hypertexte de page. Si vous n'utilisez pas l'attribut href, utilisez Nom. à la place, comme : < ;a name="PageBottom">, nous obtenons une ancre de page.
Utilisez 4 : Identité en tant qu'objet, tel qu'applet, objet, intégration et autres éléments. Par exemple, dans une instance d’objet Applet, nous utiliserons son nom pour faire référence à l’objet.
Objectif 5 : Lors de l'association entre des éléments IMG et des éléments MAP, si vous souhaitez définir la zone de hotspot d'IMG, vous devez utiliser son attribut usemap, donc usemap="#name" (Nom de la MAP associée
élément ).
Utilisation 6 : Attributs de certains éléments spécifiques, tels que l'attribut, la méta et le param. Par exemple, définissez les paramètres pour Object ou
Évidemment, ces utilisations ne peuvent pas être simplement remplacées par ID, donc la différence entre ID et Nom des éléments HTML n'est pas la différence entre le numéro d'ID et le nom. Ils ont des fonctions différentes
chose.
Nous pouvons analyser les différences subtiles grâce à un morceau de code :

Copiez le code
Le code est le suivant :




Dans le navigateur IE, combien de méthodes pouvons-nous utiliser pour indexer cet objet zone de texte ? (Par souci de distinction, nous définissons NAME et ID sur des valeurs différentes)
1. oDemo
2 demoform.oDemo
3. .oDemo
5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. >8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')

Les 9 méthodes d'indexation ci-dessus ont toutes réussi le test de valeur de retour dans IE6. , il convient de noter le dernier : dans IE6, j'ai écrit l'objet d'index sous le nom document.getElementById('oDemo'), et le navigateur peut indexer correctement l'objet. C'est une tolérance aux pannes vraiment terrible ! !
Ensuite, le problème survient. Nous mettons ce code dans Mozilla Firefox 1.0 et l'exécutons à nouveau. Seule la 7ème méthode renvoie "indéfini". Cependant, grâce aux 3ème et 4ème méthodes, l'IE. -l'objet spécifique document.all est utilisé Bien que FF1.0 renvoie la valeur correcte, un avertissement est émis dans la console : Avertissement : attribut non standard document.all. Veuillez utiliser le formulaire standard du W3C document.getElementById()
.
Ensuite, nous définissons plus strictement le type de texte HTML et ajoutons au début du code source : provoque l'analyse du texte HTML selon la norme HTML4.01. Dans IE6, tous réussissent le test de valeur de retour. Cependant, dans Mozilla Firefox 1.0, le problème est grand. 3 et 4 La première méthode n'a aucune valeur de retour, mais un message d'erreur est émis dans la console : Erreur : document.all n'a pas de propriétés, et la septième méthode renvoie toujours "undefined".
Résumé
NAME est principalement utilisé dans les pages Web interactives. Une fois le formulaire soumis à un script côté serveur, il reçoit un volume de traitement variable. Du point de vue de la standardisation et de la compatibilité du code source, si vous souhaitez indexer un objet dans un script client, il est recommandé d'utiliser
document.getElementById()
Autre exemple simple :

Nom d'utilisateur :
Mot de passe : ;

Si je veux obtenir le nom d'utilisateur et le mot de passe ; si JS utilise le nom pour l'obtenir, il doit être écrit sous la forme document.form1.username.value; .password.value ;
Utilisez l'identifiant pour obtenir :
docuement.getElementById("username");
docuement.getElementById("pwd"); cette fois, nous utilisons Une fois le nom obtenu, il est impossible de déterminer quelle valeur est obtenue.
document.getElemntsByName("username");
Ce que vous obtenez ici est un tableau
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn