[JAVA] Précautions lors de l'utilisation de querySelector () (comme un périphérique lors de la spécification de l'attribut de nom)

Contexte de la rédaction de cet article

J'écrivais un processus pour obtenir du HTML arbitraire en utilisant la "méthode querySelector ()" de JavaScript, mais au début je ne pouvais pas bien le comprendre. La raison pour laquelle il n'a pas pu être acquis avec succès est que le code de spécification de l'attribut de nom décrit lors de la spécification du HTML à acquérir n'a pas été écrit correctement. Cette fois, je voudrais écrire quelques notes lors de l'utilisation de querySelector (), y compris un périphérique pour spécifier l'attribut name.

Qu'est-ce que la méthode querySelector () en premier lieu?

C'est une méthode de JavaScript et une méthode pour obtenir du HTML arbitraire. Une méthode pour obtenir le premier élément HTML qui correspond au sélecteur spécifié. Utilisez-le comme "document.querySelector (CSS selector)". Voir l'exemple ci-dessous pour l'utilisation réelle.

Comment j'ai trébuché

Lors de la création de l'application d'origine, j'ai implémenté le bouton radio, Le processus d'obtention de la valeur du bouton sélectionné ne fonctionnait parfois pas correctement.

Je voudrais jeter un œil à l'exemple ci-dessous.

index.html

<!--Description du bouton radio. Bouton radio pour choisir iPhone ou Android-->
<group class="inline-radio">
  <div>
    <input type="radio" value="1" name="simulation[phone]" id="simulation_phone_1">
    <label for="simulation_phone">iPhone</label>
  </div>
  <div>
    <input type="radio" value="2" name="simulation[phone]" id="simulation_phone_2">
    <label for="simulation_phone">Android</label>
  </div>
</group>

index.js

//Obtenez l'élément bouton radio (NodeList)
const phone_list = document.getElementsByName('simulation[phone]');
//Les éléments de bouton radio acquis (NodeList) sont extraits un par un et stockés dans la variable e.
phone_list.forEach(function(e) {
  //Dans le cas de l'élément e cliqué (bouton enfoncé), l'événement se déclenche
  e.addEventListener("click", function() {
    //Extraire la valeur (valeur valeur) de la balise d'entrée cliquée et utiliser la variable phone_Stocker dans le plan
    const phone_plan = document.querySelector("input:checked").value;
    //Téléphone variable_sortie du plan
    console.log(phone_plan);
  });
});

• NodeList est, grosso modo, un objet qui contient toutes les informations HTML.

Il existe du HTML et du JS simples. Veuillez noter qu'il est cassé de différentes manières. Il n'y a qu'un simple bouton radio (● iPhone ● Android) dans le but de voir. Lorsque l'iphone est sélectionné avec le bouton radio, 1 est émis dans la console de l'outil de vérification.

console

1

J'ai pu obtenir la valeur normalement. Cependant, il existe de nombreuses questions implémentées avec des boutons radio en HTML (bouton radio pour sélectionner un smartphone, bouton radio pour sélectionner un PC ... etc.), et lors de l'écriture du processus pour obtenir la valeur enfoncée de chaque bouton radio J'ai un problème. C'est la "méthode querySelector ()" de JS qui doit être revue.

La position de l'élément obtenu par la méthode querySelector () est ...

Comme je l'ai écrit précédemment, la "méthode querySelector ()" obtient ** le premier élément HTML (Element) ** qui correspond au sélecteur spécifié. Par conséquent, lorsque vous essayez d'obtenir l'élément cliqué sous la forme du "querySelector (" input: checked ")" actuel, parmi plusieurs types de boutons radio, la sélection du bouton radio en haut du code HTML J'obtiens la valeur qui a été définie, et je ne peux pas bien obtenir la valeur sauf pour le bouton radio en haut du HTML.

Spécification de l'attribut name dans la méthode querySelector ()

Après avoir étudié diverses choses là-bas, il semble qu'il soit bon de spécifier l'attribut name. J'ai essayé de le réparer comme suit.

javascript

//Avant correction
const phone_plan = document.querySelector("input:checked").value;
//modifié
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;

Si vous le modifiez de cette manière, vous devriez pouvoir spécifier quelque chose comme "l'élément dont l'attribut de nom a été cliqué avec le bouton radio de simulation [téléphone]".

Mais le résultat est ...

Il semble que la valeur ne puisse pas être obtenue car il s'agit d'un sélecteur invalide. (L'attribut name est différent de l'exemple, mais pardonnez-moi s'il vous plaît ...)

javascript

//Cette façon d'écrire est correcte
querySelector("input:checked[name=nom Nom de l'attribut]]")

C'est correct, mais si la classe est l'attribut de nom spécifié (dans ce cas, l'attribut de nom "phone" de la classe de simulation), la notation ci-dessus ne semble pas fonctionner. (Est-ce parce qu'il est couvert de crochets ??)

Donc, cette fois, j'ai essayé de supprimer le nom de la classe.

javascript

//Avant correction
const phone_plan = document.querySelector("input:checked").value;
//Après la première correction
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;
//Après la deuxième correction
const phone_plan = document.querySelector("input:checked[name=phone]").value;

Le résultat est ,,

C'est une erreur qu'il n'y a pas de valeur de valeur de téléphone avec l'attribut de nom. L'attribut de nom correct est "simulation [téléphone]". Après tout, c'est un monde qui n'est pas assez doux pour prendre le nom de la classe.

Et enfin, j'ai trouvé un style d'écriture LGTM. Donc, j'ai trouvé que je devais spécifier l'attribut de nom comme ceci.

javascript

//Avant correction
const phone_plan = document.querySelector("input:checked").value;
//Après la première correction
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;
//Après la deuxième correction
const phone_plan = document.querySelector("input:checked[name=phone]").value;
//Après la troisième correction (LGTM)
const phone_plan = document.querySelector("input:checked[name*=phone]").value;

J'ai mis "*" à la place de spécifier l'attribut de nom. Cela signifie "recherche de correspondance partielle". Dans ce cas, il s'agit d'une méthode de spécification appelée l'attribut name, qui inclut "phone" dans l'attribut name. Ainsi, j'ai pu obtenir la valeur en toute sécurité.

console

1

Après cela, si vous maîtrisez le nom = * tout en faisant attention à la dénomination de l'attribut de nom, vous pouvez implémenter l'application que vous souhaitez!

Différentes manières de spécifier le sélecteur

Au fait, il existe de nombreuses façons de spécifier le sélecteur autre que name * =. https://hakuhin.jp/js/selector.html

Vous pouvez en savoir plus sur la façon d'écrire des sélecteurs sur ce site, alors jetez un œil. Il existe différentes manières de spécifier des attributs et la gamme d'implémentation s'élargira. Cela a été très utile.