Si un párrafo de HTML está demasiado anidado, todavía es bastante problemático obtener en JS. He escrito varios conjuntos de soluciones, puede referirse a ellas. Si tiene un buen método, compártelo, echemos un vistazo.
HTML:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Los elementos están anidados con múltiples capas, el problema de adquisición de JS </title> </head> <body> <div it = "box"> <span> span </div> <iv> <span> span </span </span> <a a a href = ""> <span> 1 </span> </a> </iv> <iv> <a href = ""> <span> 2 </span> </a> </div> <div> <a href = ""> <span> 3 </span> </a> </div> </body> </hml>>
Quiero obtener el tramo debajo de a.
Idea 1: Primero obtenga su elemento principal, luego obtenga los elementos debajo de este elemento a través de un bucle for a For, y luego bucle los elementos a continuación a través de los elementos obtenidos esta vez hasta que se obtenga el elemento de destino.
// Obtenga el elemento principal var dbox = document.getElementById ('box'); // Obtener todos los divvar ddiv = dbox.getElementsBytagName ('div'); // Pon todas las etiquetas en darr var aarr = []; para (var (var i = 0; i <ddiv.length; i ++) {aarr.push (ddiv [i] .getElementsBytagName ('a') [0]);} // Obtener todo spanvar spanarr = []; para (var (var (var i = 0; i <aarr.length; i ++) {spanarr.push (aarr [i] .getElementsByTagName ('span') [0]);} console.log (spanarr);Desventajas: consumir rendimiento. Si lo nesta un poco más, será bastante problemático obtener el elemento objetivo.
Idea 2: Use el elemento principal para obtener directamente el elemento objetivo, pero definitivamente hay un problema para hacerlo, porque obtendrá todos los tramos bajo el elemento principal. Mi idea es juzgar si el elemento principal es una etiqueta.
var box = document.getElementById ('box'); // Obtenga todos los spanvar span = box.getElementsByTagName ('span'); // Defina una matriz para guardar el spanvar filtrado arr = []; para (var i = 0; i <span.length; i ++) {// para determinar si SPAN es el elemento matriz o no, es, si es así, agregar a Arr. if (span [i] .parentNode.tagname === 'a') {arr.push (span [i]);}} console.log (arr);Aunque la idea 1 y la idea 2 están bien, en realidad tienen deficiencias. Si el diseño es más complicado, lo que puede obtener puede no ser tan preciso.
Si desea obtenerlo con precisión, puede agregar una clase a cada elemento. Pero para la clase, el navegador tiene problemas de compatibilidad.
De repente pensé en otro método.
Idea: al personalizar los atributos, pero debido a que hay problemas de compatibilidad con la obtención de atributos personalizados JS en JS, uso regularidad para juzgar si este elemento tiene mis atributos personalizados.
<! Doctype html> <html lang = "en"> <fead> <meta charset = "utf-8"> <title> Los elementos están anidados con varias capas, el problema de adquisición de JS </title> </head> <body> <diR ID = "box"> <span> span </shiv> <div> <span> span </span> <s-span 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
// Obtenga el elemento principal var dbox = document.getElementById ('box'); // Obtenga todos los elementos infantiles var dspan = dbox.getElementsByTagName ('span'); // Elemento actual var estr = ''; // Todos los elementos de span filtrados var spans = []; for (var i =; i <dspan.length; i ++) {// get the plan str = str = get the actual str. dspan [i] .outerhtml; console.log (str); // Determine si el elemento actual tiene un atributo personalizado if (/isspan = "span"/. test (str)) {// Si es así, agrégalo a la matriz.Se recomienda usar atributos de clase o personalizados para obtener, y los métodos primero y segundo son inexactos.
Lo anterior es la anidación de múltiples capas de los elementos JS presentados por el editor. ¡Espero que sea útil para usted, y espero que apoye más el sitio web de Wulin.com!