Ich habe eine Anforderung, bei der ich die letzte .div innerhalb eines Containers abholen und eine Geschäftslogik darauf anwenden muss. Die Auswahl des letzten .div muss dynamisch sein, da der Benutzer .div elements hinzufügen / entfernen kann.
Zuerst habe ich versucht mit querySelectorAll , aber es schien nicht zu funktionieren. Also entschied ich, es in getElementsByClassName zu ändern und überraschenderweise funktionierte es mit der gleichen Logik. Kann mir bitte jemand helfen mit dem Grund warum die remove_div nicht funktioniert während die zweite ( remove_div_2 ) funktioniert?
Hinweis: Ich suche keine Lösung / Lösung für das Problem, da ich bereits mit der zweiten Option fortgefahren bin. Ich möchte nur den Grund wissen, warum die Option mit querySelectorAll nicht funktioniert.
Unten ist mein Code:
HTML:
%Vor%JavaScript:
%Vor% Der Grund dafür ist, dass die Methode querySelectorAll eine statische Liste zurückgibt. Alle Änderungen, die an dem Dokument vorgenommen werden, nachdem querySelectorAll verwendet wurde (in diesem Fall removeChild ), werden nicht in der Liste der zurückgegebenen Knoten wiedergegeben. Daher zeigt elToStyle[elToStyle.length - 1] immer noch auf den Knoten, der entfernt wurde.
Dagegen liefert getElementsByClassName andererseits eine Live-Liste von Knoten. Dies bedeutet, dass elToStyle[elToStyle.length - 1] immer auf die letzte .div zeigt, unabhängig davon, ob Änderungen am Dokument vorgenommen wurden, nachdem die Knotenliste vorbereitet wurde oder nicht.
Nachfolgend finden Sie den Auszug aus der offiziellen Dokumentation, die hier
verfügbar istDas von der Methode querySelectorAll () zurückgegebene NodeList-Objekt muss sein statisch, nicht live ([DOM-LEVEL-3-CORE], Abschnitt 1.1.1). Anschließend Änderungen an der Struktur des zugrundeliegenden Dokuments dürfen nicht vorgenommen werden spiegelt sich im NodeList-Objekt wider. Dies bedeutet, dass das Objekt wird enthalten stattdessen eine Liste der übereinstimmenden Elementknoten, die in der Dokument zum Zeitpunkt der Erstellung der Liste.
Hinweis: Sie können dies sehen, indem Sie vor und nach dem console.log(elToStyle); eine removeChild ausführen.
Tags und Links javascript html html5 selectors-api