Quelle est la différence entre JavaScript getElementById() et getElementsByName() fonctions?

Autre que le fait que ma brève recherche m'indique ce dernier sera de retour une collection plutôt que d'un seul élément avec l'ID passé.

Considérons le code suivant:

function validateAllFields()
{
var clientid = document.getElementById("clientid");
var programs = document.getElementById("programs");
var startmonth = document.getElementById("startmonth");
var startday = document.getElementById("startday");
var startyear = document.getElementById("startyear");
var completed = document.getElementsByName("completed");
var goals = document.getElementsByName("goals");
var errors = document.getElementById("errorMsg");
errors.innerHTML = "";

if(isNumeric(clientid, errors, "Please enter a valid client ID")){
    if(madeSelection(programs, errors, "Please select a program from the drop-down list")){
        if(madeSelection(startmonth, errors, "Please enter a month for the start date")){
            if(madeSelection(startday, errors, "Please enter a day for the start date")){
                if(madeSelection(startyear, errors, "Please enter a year for the start date")){
                    if(checked(completed, errors, "Please choose an option that indicate whether the client has completed the program")){
                        if(checked(goals, errors, "Please choose an option that indicate whether the client has met his/her goals.")){
                            window.alert("GOT IN TO  RETURN TRUE");
                            return true;
                        }
                    }
                }
            }
        }
    }
}
return false;
}
</script>

Le code ci-dessus fonctionne parfaitement après l'avoir mis dans le onsubmit gestionnaire de la forme. Toutefois, plus tôt, pour les éléments (programmes, startmonth, startday, startyear) j'ai été en utilisant getElementsByName(), les éléments suivants s'est produit:

  1. Le code semble arriver à la deuxième ligne de la si les blocs "si(madeSelection(des programmes...." et il s'affiche le msg d'erreur via innerHTML pour une brève seconde et
  2. Procédé à soumettre le formulaire COMME SI le JS avait en effet retourné véritable. Comme vous pouvez le dire, il y a une alerte popup droit avant de retourner vrai et le popup ne s'est PAS montré à tous.
  3. De mauvaises données a été soumis à mon test de la base de données, car le formulaire n'a pas été validé. (encore à écrire une validation côté serveur, avec cette forme, mais je le ferai).

veuillez prendre les éléments programmes, startmonth, startday, et startyear sont des listes déroulantes avec les mêmes attributs id et name.

Aussi, le madeSelection fonction est donnée comme:

function madeSelection(element, error, msg) {
if (element[0].value == "none" || element[0].valueOf == "none" || element[0].value == "") {
    error.innerHTML = msg;
    element.focus();
    return false;
} else {
    return true;
}
}

Mon code fonctionne maintenant après que j'ai changé ces éléments à l'aide getElementById(), je me demandais juste pourquoi getElementsByName présenté un tel comportement.

  • voulez-vous dire getElementsByTagName()?
  • non, il n'est pas: w3schools.com/jsref/met_doc_getelementsbyname.asp
  • Votre code est un gâchis, avec tout ce que l'indentation. Envisager un retour faux après chaque erreur détectée et le retour de vrai à la fin, s'il n'y avait pas d'erreurs.
InformationsquelleAutor KyleL | 2011-06-15
  1. 5

    La GetElementsByName méthode renvoie un tableau, et lorsque vous avez essayé d'appeler element.focus() vous avez une erreur car il n'y a pas de focus méthode sur un tableau. Lorsque vous obtenez une erreur dans le gestionnaire d'événements qu'il n'empêchera pas la forme de l'affichage.

    Si vous utilisez GetElementById vous devez utiliser element pour accéder à l'élément, et si vous utilisez GetElementsByName vous devez utiliser element[0].

    InformationsquelleAutor Guffa
  2. 8
    <input type="text" name="foo" id="bar">
                   ^^^^       ^^

    getElementsByName obtient les éléments par leur name, getElementById obtient l'élément par son id. Il peut y avoir beaucoup d'éléments sur une page avec le même name (d'où getElementsByName retourne toujours une liste d'éléments), mais il est (doit) être un élément avec un id (donc getElementById retourne uniquement un seul élément).

    • Probablement la peine de mentionner un IE caprice de trop - si vous utilisez getElementByID("a_name"), il va retourner l'élément par nom si l'ID n'existe pas. Dans d'autres navigateurs, il échouera donc, peut-être une étrange expérience de débogage.
    InformationsquelleAutor deceze
  3. 3

    Le nom de l'attribut n'est pas conçu pour être unique, tandis que l'attribut id est.

    <div name="nonUnique" />
<div id="unique" />
    • En particulier, les entrées de type "radio" partager le même nom si elles appartiennent au même groupe.
    • Notez que selon le MDN, name n'est pas un attribut valide sur un <div>.
    InformationsquelleAutor k_b
  4. 2

    Pour la forme à ne pas être soumis, return false doit être retourné (vous l'avez dit vous avez utilisé le onsubmit gestionnaire)

    dans la deuxième ligne de votre code, car une sélection est en effet retourné par getElementsByName (il serait de travailler avec .getElementsByName("test")[0] ) un js erreur est renvoyée. Le reste du code n'est pas exécuté, donc rien n'est retourné et la forme passe par le reste de la validation complètement.

    InformationsquelleAutor Pantelis
  5. 2

    La méthode getElementById peut accéder à un seul élément à la fois, et qui est l'élément avec l'ID que vous avez spécifié. Le getElementsByName méthode est différente. Il recueille un tableau d'éléments qui ont le nom que vous avez spécifié. Vous accéder aux éléments individuels à l'aide d'un index qui commence à 0.

    getElementById

    Quelle est la différence entre JavaScript getElementById() et getElementsByName() fonctions?

    • Il obtiendra un seul élément pour vous.
    • Cet élément porte le nom d'utilisateur que vous avez spécifié à l'intérieur des parenthèses de getElementById().

    getElementsByName

    Quelle est la différence entre JavaScript getElementById() et getElementsByName() fonctions?

    • Il va obtenir une collection d'éléments dont les noms sont tous les mêmes.
    • Chaque élément est indexé avec un numéro commençant par 0 tout comme un tableau
    • Vous spécifiez l'élément auquel vous souhaitez accéder en mettant son numéro d'index dans les crochets dans getElementsByName de la syntaxe ci-dessous.

    JS:

    function test() {
  var str = document.getElementById("a").value;
  console.log(str);

  var str1 = document.getElementsByName("a")[0].value;
  console.log(str1);
  var str2 = document.getElementsByName("a")[1].value;
  console.log(str2);
}

    HTML:

    <input type="text" id="a" value="aValue" />
<br>
<br>
<input type="text" name="a" value="bValue" />
<br>
<br>
<input type="text" name="a" value="cValue" />
<br>
<br>
<button onclick="test()">Click Here</button>

    • cela devrait être Marqué Répondre
    InformationsquelleAutor shas
  6. 2

    De développer un peu sur les réponses déjà fournies, le nom attribut a été fourni au début du jours du navigateur DOM, pour permettre au contenu des éléments de formulaires pour être soumis avec référence à ce nom d'attribut, de sorte que les paramètres peuvent être passés à un script CGI sur le serveur. Cela date d'avant la plus moderne de la possibilité de référencer des éléments du DOM pour la manipulation des choses telles que les styles par JavaScript.

    Lorsque le DOM a été élargi pour permettre à ladite moderne manipulations, le id attribut a été ajouté, de sorte que les différents éléments pourraient être manipulée à volonté. Lorsque vous souhaitez effectuer des manipulations DOM, vous sélectionnez les éléments à manipuler soit via le id attribut, si vous êtes uniquement intéressé par la manipulation d'un seul élément du DOM, ou par l'intermédiaire de la classe attribut (convenablement définie par vous-même), si vous voulez manipuler plusieurs éléments ensemble de la même manière. Dans ce dernier cas, vous pouvez définir la classe attribut à plusieurs valeurs (les chaînes de noms séparés par des espaces), de sorte que vous pouvez, par exemple, désigner des éléments d'appartenir à plus d'une classe, et d'effectuer des manipulations en conséquence. Vous pouvez mélanger et assortir id et classe attributs pratiquement à volonté, à condition que vous exercer un peu de soin pour éviter les collisions de noms.

    Ainsi, par exemple, vous pouvez avoir cinq boutons sur votre page web, le tout à:

    class="Set1"

    et de changer de style de tous ces boutons, d'abord en utilisant une instruction telle que:

    myButtons = document.getElementsByClassName("Set1");

    pour obtenir un tableau d'objets éléments correspondant à vos boutons, puis l'exécution de la boucle suivante:

    for (i=0; i<myButtons.length; i++)
    myButtons[i].style.color="#FF0000";

    de changer la couleur du texte en rouge. L'un de ces boutons pourraient en outre avoir une id de l'attribut de "Spécial", et vous pourriez faire quelque chose comme:

    ref = document.getElementById("Special");
ref.style.backgroundColor = "#FFFF00";

    pour définir la couleur de fond du bouton dans le jaune, pour signaler qu'il est prévu pour une fonction particulière au sein de l'ensemble.

    En bref, utiliser la nom attribut pour les soumissions de formulaire, et le id et classe attributs pour en se référant à des éléments que vous avez l'intention d'effectuer les manipulations DOM sur, ou de joindre des gestionnaires d'événements, etc.

    InformationsquelleAutor David Edwards