[JAVA] Vorsichtsmaßnahmen bei der Verwendung von querySelector () (z. B. ein Gerät bei der Angabe des Namensattributs)

Hintergrund des Schreibens dieses Artikels

Ich habe die JavaScript-Methode "querySelector ()" verwendet, um den Prozess des Abrufens von beliebigem HTML zu beschreiben, aber zuerst konnte ich es nicht gut verstehen. Der Grund, warum es nicht erfolgreich erfasst werden konnte, ist, dass der Spezifikationscode des Namensattributs, das bei der Angabe des zu erfassenden HTML-Codes beschrieben wurde, nicht ordnungsgemäß geschrieben wurde. Dieses Mal möchte ich einige Notizen schreiben, wenn ich querySelector () verwende, einschließlich eines Geräts zur Angabe des Namensattributs.

Was ist die querySelector () -Methode überhaupt?

Es ist eine Methode von JavaScript und eine Methode, um beliebiges HTML zu erhalten. Eine Methode, um das erste HTML-Element abzurufen, das dem angegebenen Selektor entspricht. Verwenden Sie es wie "document.querySelector (CSS-Selektor)". Die tatsächliche Verwendung finden Sie im folgenden Beispiel.

Wie ich gestolpert bin

Beim Erstellen der ursprünglichen App habe ich das Optionsfeld implementiert. Das Abrufen des Werts der ausgewählten Schaltfläche funktionierte manchmal nicht gut.

Ich möchte mir das folgende Beispiel ansehen.

index.html

<!--Beschreibung des Optionsfelds. Optionsfeld zur Auswahl von iPhone oder 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

//Holen Sie sich das Optionsfeldelement (NodeList)
const phone_list = document.getElementsByName('simulation[phone]');
//Die erfassten Optionsfeldelemente (NodeList) werden einzeln herausgenommen und in der Variablen e gespeichert.
phone_list.forEach(function(e) {
  //Im Fall des angeklickten (Taste gedrückt) Elements e wird das Ereignis ausgelöst
  e.addEventListener("click", function() {
    //Extrahieren Sie den Wert (Wertwert) des angeklickten Eingabe-Tags und verwenden Sie das variable Telefon_Im Plan speichern
    const phone_plan = document.querySelector("input:checked").value;
    //Variables Telefon_Ausgabe des Plans
    console.log(phone_plan);
  });
});

• NodeList ist grob gesagt ein Objekt, das alle HTML-Informationen enthält.

Es gibt einfaches HTML und JS. Bitte beachten Sie, dass es auf verschiedene Arten kaputt ist. Es gibt nur ein einfaches Optionsfeld (● iPhone ● Android) zum Anzeigen. Wenn das iPhone mit dem Optionsfeld ausgewählt ist, wird 1 in der Konsole des Überprüfungstools ausgegeben.

console

1

Ich konnte den Wert normal erhalten. Es gibt jedoch viele Fragen, die mit Optionsfeldern in HTML (Optionsfeld zum Auswählen eines Smartphones, Optionsfeld zum Auswählen eines PCs usw.) und beim Schreiben eines Prozesses zum Erfassen des gedrückten Werts jedes Optionsfelds implementiert werden. Ich habe ein Problem. Es ist die "querySelector () -Methode" von JS, die überprüft werden muss.

Die Position des Elements, das die querySelector () -Methode erhält, ist ...

Wie ich bereits geschrieben habe, erhält die "querySelector () -Methode" ** das erste HTML-Element (Element) **, das dem angegebenen Selektor entspricht. Wenn Sie also versuchen, das angeklickte Element in Form des aktuellen "querySelector (" input: checked ")" unter mehreren Arten von Optionsfeldern abzurufen, wird die Optionsfeldauswahl oben im HTML angezeigt Ich erhalte den eingestellten Wert und kann den Wert nur mit dem Optionsfeld oben im HTML-Code gut ermitteln.

Angabe des Namensattributs in der querySelector () -Methode

Nach der Untersuchung verschiedener Dinge scheint es gut zu sein, das Namensattribut anzugeben. Ich habe versucht, es wie folgt zu beheben.

javascript

//Vor der Korrektur
const phone_plan = document.querySelector("input:checked").value;
//Überarbeitet
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;

Wenn Sie es so ändern, sollten Sie in der Lage sein, etwas wie "das Element, auf dessen Namensattribut mit dem Optionsfeld Simulation [Telefon] geklickt wurde" anzugeben.

Aber das Ergebnis ist ...

Es scheint, dass der Wert nicht erhalten werden kann, da es sich um einen ungültigen Selektor handelt. (Das Namensattribut unterscheidet sich vom Beispiel, aber bitte verzeihen Sie mir ...)

javascript

//Diese Schreibweise ist korrekt
querySelector("input:checked[name=name Attributname]]")

Ist korrekt, aber wenn die Klasse das angegebene Namensattribut ist (in diesem Fall das Namensattribut "Telefon" der Simulationsklasse), scheint die obige Notation nicht zu funktionieren. (Liegt es daran, dass es mit eckigen Klammern bedeckt ist?)

Also habe ich diesmal versucht, den Klassennamen zu entfernen.

javascript

//Vor der Korrektur
const phone_plan = document.querySelector("input:checked").value;
//Nach der ersten Korrektur
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;
//Nach der zweiten Korrektur
const phone_plan = document.querySelector("input:checked[name=phone]").value;

Ergebnis ist ,,.

Es ist ein Fehler, dass es keinen Wert für das Telefon mit dem Namensattribut gibt. Das korrekte Namensattribut lautet "Simulation [Telefon]". Immerhin ist es eine Welt, die nicht süß genug ist, um den Klassennamen anzunehmen.

Und schließlich fand ich einen LGTM-Schreibstil. Also fand ich, dass ich das Namensattribut so angeben sollte.

javascript

//Vor der Korrektur
const phone_plan = document.querySelector("input:checked").value;
//Nach der ersten Korrektur
const phone_plan = document.querySelector("input:checked[name=simulation[phone]]").value;
//Nach der zweiten Korrektur
const phone_plan = document.querySelector("input:checked[name=phone]").value;
//Nach der dritten Korrektur (LGTM)
const phone_plan = document.querySelector("input:checked[name*=phone]").value;

Ich habe "*" anstelle der Angabe des Namensattributs eingefügt. Dies bedeutet "teilweise Übereinstimmungssuche". In diesem Fall handelt es sich um eine Spezifikationsmethode namens Namensattribut, die "Telefon" im Namensattribut enthält. So konnte ich den Wert sicher erhalten.

console

1

Wenn Sie danach den Namen = * beherrschen und dabei auf die Benennung des Namensattributs achten, können Sie die gewünschte App implementieren!

Verschiedene Möglichkeiten, den Selektor anzugeben

Übrigens gibt es viele andere Möglichkeiten, den Selektor als name * = anzugeben. https://hakuhin.jp/js/selector.html

Weitere Informationen zum Schreiben von Selektoren finden Sie auf dieser Website. Schauen Sie also bitte vorbei. Es gibt verschiedene Möglichkeiten, Attribute anzugeben, und der Implementierungsbereich wird erweitert. Es war sehr hilfreich.