La différence entre document.forms[0] et getElementByName dans les compétences JavaScript_javascript

Regardons d’abord un exemple :

Copier le code Le code est le suivant :

testtest

testtest

testtest

document.forms[0] Lorsqu'il y a un ou plusieurs formulaires dans la page HTML, un tableau de formulaire de type NodeList est renvoyé
document.forms[0].usernames, où les noms d'utilisateur peuvent être la valeur de id ou la valeur de name, ces deux attributs sont ici équivalents. De plus, il ne distingue pas si le composant est une zone de texte, un bouton radio ou une case à cocher.

À ce stade, deux situations doivent être distinguées ,

Lorsqu'il existe une entrée dont l'identifiant ou le nom est « noms d'utilisateur », document.forms[0].usernames renvoie le composant d'entrée spécifique. Si vous l'utilisez à ce moment-là, vous devez l'utiliser selon la méthode de fonctionnement spécifique du composant. .

À ce stade, alert(document.forms[0].usernames.length) renvoie undefined car le composant d'entrée n'a pas l'attribut length.
Lorsqu'il y a deux entrées ou plus dont les identifiants ou les noms sont des « noms d'utilisateur », document.forms[0].usernames renvoie un tableau NodeList à ce moment-là,
. alert(document.forms[0].usernames.length) renverra la longueur du tableau. Dans l'exemple ci-dessus, la valeur de retour est 3
. Par conséquent, lorsque vous utilisez js pour tout sélectionner, vous devez vous demander s'il existe une ou plusieurs cases à cocher portant le même nom

Copier le code Le code est le suivant :

fonction allSelect(){
var form = document.forms[0];
var state = form.allselectbox.checked;
var length = form.usernames.length;//Lorsqu'il y a deux cases à cocher ou plus nommées noms d'utilisateur, la longueur du tableau est renvoyée
//Lorsqu'il y a une case à cocher nommée usernames, form.usernames renvoie l'objet checkbox au lieu d'un tableau, donc son attribut de longueur n'est pas défini
if(length){ //En JavaScript, tant que la condition jugée est 0, nulle ou indéfinie, elle est considérée comme fausse et les autres situations sont considérées comme vraies
pour(var i=0;i form.usernames[i].checked=state;
>
>
autre{
form.usernames.checked=state;
>
>

S'il existe un composant avec l'ID 'usernames' ou plusieurs ID de composant avec l'ID 'usernames', la valeur renvoyée par document.getElementById('usernames') est un composant de formulaire avec. l'ID de 'noms d'utilisateur', return est le premier composant avec l'ID 'noms d'utilisateur'.
S'il existe un composant portant le nom « noms d'utilisateur » ou plusieurs composants portant le nom « noms d'utilisateur », document.getElementsByName() renvoie un tableau HTMLCollection. Notez la différence avec document.getElementsByTagName(), qui obtient un tableau basé sur la catégorie de balise.
var noms = document.getElementsByTagName("usernames"), alert(names[0]) Le résultat renvoyé ici n'est pas défini, j'ai initialement confondu byName avec byTagName, et aucune balise ne commence par des noms d'utilisateur, <. ;/usernames>Cela n’existe pas.
Cependant, getElementsByTagName renvoie toujours une collection de tableaux, qui ne contient aucun contenu. [0] n'existe pas, donc undefined est renvoyé, car lorsqu'il dépasse la plage du tableau, toutes les valeurs non définies apparaissent.
var test = {'0','1','2',};alert(test[3]); renvoie undéfini.