Jika paragraf HTML terlalu bersarang, masih cukup merepotkan untuk mendapatkan di JS. Saya telah menulis beberapa set solusi, Anda dapat merujuknya. Jika Anda memiliki metode yang bagus, bagikan, mari kita lihat.
Html:
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> elemen bersarang dengan beberapa lapisan, masalah akuisisi JS </itement> </head> <div id = "box"> <span> Span </span> <div> <pan> </span/span ""> <span> Span </san> <d Div> <span> </span> href = ""> <span> 1 </span> </a> </div> <div> <a href = ""> <span> 2 </span> </a> </div> <div> <a href = ""> <span> 3 </span> </a> </div> </body> </html>
Saya ingin mendapatkan rentang di bawah a.
Ide 1: Pertama dapatkan elemen induknya, lalu dapatkan elemen di bawah elemen ini melalui loop untuk loop, dan kemudian loop elemen di bawah ini melalui elemen yang diperoleh kali ini sampai elemen target diperoleh.
// Dapatkan elemen induk var dbox = document.geteLementById ('box'); // dapatkan semua divvar ddiv = dbox.geteLementsbyTagname ('div'); // Masukkan semua tag di darr var aarr = []; untuk (var i = 0; i <ddiv.length; i ++) {aarr.push (ddiv [i] .geteLementsByTagname ('a') [0]);} // dapatkan semua spanvar spanarr = []; untuk (var i = 0; i <aarr.length; i ++) {spanarr.push (aarr [i] .geteLementsByTagname ('span') [0]);} console.log (spanarr);Kekurangan: Mengkonsumsi kinerja. Jika Anda sedikit lebih banyak, akan sangat merepotkan untuk mendapatkan elemen target.
Ide 2: Gunakan elemen induk untuk secara langsung mendapatkan elemen target, tetapi pasti ada masalah melakukan ini, karena itu akan mendapatkan semua rentang di bawah elemen induk. Ide saya adalah menilai apakah elemen induk adalah tag.
var box = document.geteLementById ('box'); // Dapatkan semua spanvar span = box.geteLementsbyTagname ('span'); // tentukan array untuk menyimpan spanvar arr yang difilter = []; untuk (var i = 0; i <span.length; i ++) {// Untuk menentukan apakah rentang adalah elemen induk atau itu, adalah itu, ARR. if (span [i] .parentnode.tagname === 'a') {arr.push (span [i]);}} console.log (arr);Meskipun ide 1 dan ide 2 baik -baik saja, mereka sebenarnya memiliki kekurangan. Jika tata letaknya lebih rumit, apa yang mungkin Anda dapatkan mungkin tidak begitu akurat.
Jika Anda ingin mendapatkannya secara akurat, Anda dapat menambahkan kelas ke setiap elemen. Tetapi untuk kelas, browser memiliki masalah kompatibilitas.
Tiba -tiba saya memikirkan metode lain.
IDEA: Dengan menyesuaikan atribut, tetapi karena ada masalah kompatibilitas dengan mendapatkan atribut khusus JS di JS, saya menggunakan keteraturan untuk menilai apakah elemen ini memiliki atribut khusus saya.
<! Doctype html> <html lang = "en"> <head> <meta charset = "UTF-8"> <Title> elemen bersarang dengan beberapa lapisan, masalah akuisisi JS </itement> </head> <bod> <Div id = ""> <span> Span </span> <Div> <pan> <pan> </span/box = "span> Span </span> <v Div> <pan> <span/span/box =" span> Span </span> <v Div> <span> <span/span/box = "span> span </span> <v Div> <span> <pan> <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> ht ht>
JS
// Dapatkan elemen induk var dbox = document.geteLementById ('box'); // Dapatkan semua elemen anak var dspan = dbox.geteLementsbyTagname ('span'); // elemen saat ini var str = ''; // semua elemen rentang yang difilter var spans = []; untuk (var i =; i <dspan.length; i +++) {var i =; i <dspan.length; i ++) {var i =; i <dspan.length; i ++) {var i =; i <dspan.length; i ++) {var i =; i <dspan.length; i ++ dspan [i] .outerHtml; console.log (str); // Tentukan apakah elemen saat ini memiliki atribut khusus jika (/isspan = "span"/. test (str)) {// jika demikian, tambahkan ke array spans.push (dspan [i]);}} konsol.log (spans);Disarankan untuk menggunakan atribut kelas atau khusus untuk diperoleh, dan metode pertama dan kedua tidak akurat.
Di atas adalah sarang multi-lapisan dari elemen JS yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda, dan saya harap Anda akan mendukung situs web Wulin.com lebih lanjut!