Verwalten mehrerer Elemente mit derselben ID in JavaScript
In JavaScript ist getElementById eine Methode zum Abrufen eines Elements basierend auf seinem ID-Attribut . Was passiert jedoch, wenn mehrere Elemente dieselbe ID haben?
Problemstellung:
Wie können wir mit getElementById eine Sammlung von Elementen mit demselben ID-Attribut abrufen?
Diskussion und Lösung:
Während es nicht empfohlen wird, mehrere identische IDs zu verwenden Innerhalb einer Webseite kann es vorkommen, dass dies auftritt. Um dieses Problem zu beheben, können wir Problemumgehungen anwenden:
Ein Ansatz besteht darin, querySelectorAll zu verwenden, das eine Sammlung von Elementen zurückgibt, die dem angegebenen Selektor entsprechen. Hier ein Beispiel:
var elms = document.querySelectorAll("[id='duplicateID']"); // Access and modify the elements as needed...
Durch die Verwendung des CSS-Selektors mit den eckigen Klammern können wir alle Elemente mit dem angegebenen ID-Wert abrufen, auch wenn dieser mehrmals vorkommt.
Alternativ, wenn Wir müssen ausschließlich getElementById verwenden. Wir können die Elemente iterativ anhand ihrer ID-Werte abrufen und sie einem Array hinzufügen:
var elms = []; var id = "duplicateID"; // Loop through all elements with the specified ID... while (document.getElementById(id)) { // Add the element to the array... elms.push(document.getElementById(id)); // Increment the id to avoid duplicates... id += "_duplicate"; } // Access and modify the array of elements...
By Indem wir den ID-Wert in jeder Iteration erhöhen, erstellen wir effektiv eindeutige IDs, auf die mit getElementById zugegriffen werden kann.
Bedenken Sie, dass die Verwendung mehrerer identischer IDs zu unerwartetem Verhalten führen kann und dies im Allgemeinen keine empfohlene Vorgehensweise ist. Diese Problemumgehungen können jedoch beim Umgang mit vorhandenen Codebasen oder bei der Arbeit mit HTML-Dokumenten von Drittanbietern hilfreich sein.
Das obige ist der detaillierte Inhalt vonWie rufe ich mehrere Elemente mit derselben ID in JavaScript ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!