Se um parágrafo de HTML estiver muito aninhado, ainda é bastante problemático obter no JS. Eu escrevi vários conjuntos de soluções, você pode se referir a elas. Se você tem um bom método, compartilhe -o, vamos dar uma olhada.
Html:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Os elementos são aninhados com múltiplas camadas, o problema de aquisição do JS </titlet> </ad Head> <body> <div id = "caixa"> </span </span <div> <div> </span> </span> </span> </span> </span> <a> href = ""> <pan> 1 </span> </a> </div> <div> <a href = ""> <pan> 2 </span> </a> </div> <div> <a href = ""> <pan> 3 </span> </a> </div> </body> </html>
Eu quero obter o extensão abaixo de a.
IDEA 1: Primeiro, obtenha seu elemento pai e, em seguida, obtenha os elementos abaixo desse elemento através de um loop for e, em seguida, ligue os elementos abaixo através dos elementos obtidos desta vez até que o elemento de destino seja obtido.
// obtenha o elemento pai var dbox = document.getElementById ('box'); // obtenha todo o divvar ddiv = dbox.getElementsByTagName ('div'); // coloque todas as tags em Darr var aarr = []; para (var (var i = 0; i <ddiv.length; i ++) {aarr.push (ddiv [i] .getElementsByTagName ('a') [0]);} // obtenha todos os spanvar spanarr = []; para (var (var i = 0; i <aarr.length; i ++) {spanarr.push (aarr [i] .getElementsByTagName ('span') [0]);} console.log (spanarr);Desvantagens: consumindo desempenho. Se você aninhar um pouco mais, será bastante problemático obter o elemento de destino.
Idéia 2: use o elemento pai para obter diretamente o elemento de destino, mas definitivamente há um problema em fazer isso, porque ele obterá todos os vãos sob o elemento pai. Minha idéia é julgar se o elemento pai é uma tag.
var box = document.getElementById ('caixa'); // Obtenha todo o spanvar span = box.getElementsByTagName ('span'); // Defina uma matriz para salvar o spanvar filtrado ARR = []; para (var i = 0; i <span.length; i ++) {// para determinar se o elemento não é o pai ou não, não é o pai ou não é o pai ou o span; if (span [i] .parentnode.tagname === 'a') {arr.push (span [i]);}} console.log (arr);Embora a idéia 1 e a ideia 2 estejam bem, eles realmente têm deficiências. Se o layout for mais complicado, o que você pode obter pode não ser tão preciso.
Se você deseja obtê -lo com precisão, poderá adicionar uma classe a cada elemento. Mas para a aula, o navegador tem problemas de compatibilidade.
De repente, pensei em outro método.
Ideia: ao personalizar atributos, mas como existem problemas de compatibilidade na obtenção de atributos personalizados do JS no JS, uso regularidade para julgar se esse elemento tem meus atributos personalizados.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Elements are nested with multiple layers, JS acquisition problem</title></head><body><div id="box"><span>span</span><div><span>span</span><a href=""><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> </htrpan = 'span'> 3 </span> </a> </div> </body> </htrpan = ''>
JS
// obtenha o elemento pai var dbox = document.getElementbyId ('caixa'); // obtenha todos os elementos filho var dspan = dbox.getElementsByTagName ('span'); // elemento atual var = ''; // todos os elementos de span filtrados var spans = []; para (var i =; i <dspan.llind; dspan [i] .outerhtml; console.log (str); // Determine se o elemento atual possui um atributo personalizado se (/iSSPAN = "span"/. test (str)) {// se sim, adicione -o ao array stans.push (dspan [i]);}} Console.Log (Espans);Recomenda -se usar atributos de classe ou personalizado para obter, e o primeiro e o segundo métodos são imprecisos.
O exposto acima é o ninho de várias camadas dos elementos JS apresentados a você pelo editor. Espero que seja útil para você e espero que você apoie mais o site wulin.com!