Wenn ein Absatz von HTML zu verschachtelt ist, ist es immer noch ziemlich problematisch, in JS zu erhalten. Ich habe mehrere Lösungssätze geschrieben, Sie können sich auf sie beziehen. Wenn Sie eine gute Methode haben, teilen wir sie mit, schauen wir uns an.
HTML:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <titels> Elemente sind mit mehreren Ebenen verschachtelt, JS-Erwerbsproblem </title> </head> <body> <div id = "box"> </span> </span> </span> </span> </span> </span> </span> </span> </a href = ""> <span> 1 </span> </a> </div> <div> <a href = ""> <span> 2 </span> </a> </div> <div> <a href = "> <span> 3 </span> </a> </div> </body> </html>
Ich möchte die Zeitspanne unter a bekommen.
Idee 1: Erhalten Sie zuerst sein übergeordnetes Element, dann die Elemente unter diesem Element durch eine für die Schleife und dann die folgenden Elemente durch die diesmal erhaltenen Elemente, bis das Zielelement erhalten wird.
// Erhalten Sie das übergeordnete Element var dbox = document.getElementById ('box'); // Holen Sie sich alle divvar ddiv = dbox.getElementsByTagname ('div'); // Alle A -Tags in Darr var aarr = []; for (var i = 0; i <ddiv.length; i ++) {aarr.push (ddiv [i] .GetElementsByTagName ('a') [0]);} // GET ALLE Spanvar Spanarr = []; for (var i = 0; i <aarr.length; i ++) {spanarr.push (aarr [i] .GetElementsByTagName ('span') [0]);} console.log (spanarr);Nachteile: Leistung konsumieren. Wenn Sie es ein wenig mehr nisten, wird es ziemlich problematisch sein, das Zielelement zu erhalten.
Idee 2: Verwenden Sie das übergeordnete Element, um das Zielelement direkt zu erhalten, aber es gibt definitiv ein Problem, da alle Spannweiten unter das übergeordnete Element erhältlich sind. Meine Idee ist es, zu beurteilen, ob das übergeordnete Element ein Tag ist.
var box = document.getElementById ('box'); // Alle Spanvar span = box.getElementsByTagName ('span'); // Definieren Sie ein Array zum Speichern des gefilterten Spanvar arr = []; für (var i = 0; i <span if (span [i] .Parentnode.tagname === 'a') {arr.push (span [i]);}} console.log (arr);Obwohl Idee 1 und Idee 2 in Ordnung sind, haben sie tatsächlich Mängel. Wenn das Layout komplizierter ist, ist das, was Sie möglicherweise erhalten, möglicherweise nicht so genau.
Wenn Sie es genau bekommen möchten, können Sie jedem Element eine Klasse hinzufügen. Für den Unterricht hat der Browser jedoch Kompatibilitätsprobleme.
Plötzlich dachte ich an eine andere Methode.
Idee: Durch das Anpassen von Attributen, aber da es Kompatibilitätsprobleme bei der Erlangung von JS -benutzerdefinierten Attributen in JS gibt, verwende ich die Regelmäßigkeit, um zu beurteilen, ob dieses Element über meine individuellen Attribute verfügt.
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Elemente sind mit mehreren Ebenen verschachtelt, JS Acquisition Problem </title> </head> <body> <div id = "box"> </span> </span> </span> </span> </span> <a href = "" isspan='span'>1</span></a></div><div><a href=""><span isspan='span'>2</span></a></div><a href=""><span isspan='span'>3</span></a></div></body></html>
JS
// Erhalten Sie das übergeordnete Element var dbox = document.getElementById ('box'); // Alle untergeordneten Elemente var dspan = dbox.getElementsByTagName ('span'); // aktuelles Element var str = ''; // alle gefilterten Span -Elemente var Spans = []; für (var i =; dspan [i] .outerhtml; console.log (str); // Bestimmen Sie, ob das aktuelle Element ein benutzerdefiniertes Attribut hat, wenn (/isspan = "span"/. test (st. stro)) {// Wenn ja, fügen Sie es dem Array Spans.push (dspan [i]);}} console.log (spans);Es wird empfohlen, Klassen- oder benutzerdefinierte Attribute zu verwenden, um zu erhalten, und die ersten und zweiten Methoden sind ungenau.
Das obige ist die mehrschichtige Verschachtelung von JS-Elementen, die Ihnen vom Herausgeber vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein und ich hoffe, Sie werden die Website wulin.com mehr unterstützen!