Si un paragraphe de HTML est trop imbriqué, il est encore très difficile d'obtenir en JS. J'ai écrit plusieurs ensembles de solutions, vous pouvez vous y référer. Si vous avez une bonne méthode, partagez-la, jetons un coup d'œil.
HTML:
<! Doctype html> <html lang = "en"> <éread> <meta charset = "utf-8"> <tight> Les éléments sont imbriqués avec plusieurs couches, JS Problème d'acquisition </pan> </div> <pan> </ving> <A " href = ""> <span> 1 </span> </a> </div> <div> <a href = ""> <span> 2 </span> </a> </div> <v> <a href = ""> <pan> 3 </span> </a> </ div> </ body> </html>
Je veux obtenir la durée en dessous d'un.
Idée 1: Obtenez d'abord son élément parent, puis obtenez les éléments en dessous de cet élément via une boucle pour une boucle, puis boucle les éléments ci-dessous à travers les éléments obtenus cette fois jusqu'à ce que l'élément cible soit obtenu.
// Obtenez l'élément parent var dbox = document.getElementById ('box'); // obtenez tous les divvar ddiv = dbox.getElementsByTagName ('div'); // mettez toutes les balises dans darr var aarr = []; for (var i = 0; i <ddiv.length; i ++) {aarr.push (ddiv [i] .getElementsByTagName ('a') [0]);} // Get All Spanvar Spanarr = []; for (var i = 0; i <aarr.length; i ++) {spanarr.push (aarr [i] .getElementsByTagName ('span') [0]);} console.log (spanarr);Inconvénients: consommation de performance. Si vous le niche un peu plus, il sera assez difficile d'obtenir l'élément cible.
Idée 2: Utilisez l'élément parent pour obtenir directement l'élément cible, mais il y a certainement un problème à le faire, car il obtiendra toutes les portées sous l'élément parent. Mon idée est de juger si l'élément parent est une étiquette.
var box = document.getElementById ('box'); // Obtenez tous les spanvar span = box.getElementsByTagName ('span'); // définir un tableau pour enregistrer le Spanvar filtré Arr = []; for (var i = 0; i <span.length; i ++) {// pour déterminer si Span est l'élément parent ou non, est-ce un,, si c'est le cas, ajoute pour arr. if (span [i] .parentNode.tagname === 'a') {arr.push (span [i]);}} console.log (arr);Bien que l'idée 1 et l'idée 2 soient OK, ils ont en fait des lacunes. Si la mise en page est plus compliquée, ce que vous pourriez obtenir peut ne pas être aussi précis.
Si vous souhaitez l'obtenir avec précision, vous pouvez ajouter une classe à chaque élément. Mais pour la classe, le navigateur a des problèmes de compatibilité.
Soudain, j'ai pensé à une autre méthode.
Idée: en personnalisant les attributs, mais comme il y a des problèmes de compatibilité avec l'obtention d'attributs personnalisés JS dans JS, j'utilise la régularité pour juger si cet élément a mes attributs personnalisés.
<! Doctype html> <html lang = "en"> <éad> <meta charset = "utf-8"> <itle> Les éléments sont imbriqués avec plusieurs couches, le problème d'acquisition JS </pan> </div> <pan> </pande> <a href = ""> </pan> <v> <spande> span </pan> <a href = ""> </pan> <v> <span> Span </pan> <a href = ""> </pan> <v> <pank </pande> <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> </v> </ body> </html>
js
// Obtenez l'élément parent var dbox = document.getElementById ('box'); // obtenir tous les éléments enfants var var dspan = dbox.getElementsByTagName ('span'); // élément actuel var str = ''; // tous les éléments span filtrés var spans = []; pour (var i =; i <dspan.Length dspan [i] .outerhtml; console.log (str); // déterminez si l'élément actuel a un attribut personnalisé if (/ isspan = "span" /. test (str)) {// Si c'est le cas, ajoutez-le à la table Spans.push (dspan [i]);}} console.log (Spans);Il est recommandé d'utiliser des attributs de classe ou personnalisés à obtenir, et les première et deuxième méthodes sont inexactes.
Ce qui précède est la nidification multicouche des éléments JS qui vous est présentée par l'éditeur. J'espère que cela vous sera utile, et j'espère que vous soutiendrez davantage le site wulin.com!