หากย่อหน้าของ HTML ซ้อนกันเกินไปมันก็ค่อนข้างลำบากที่จะได้รับใน JS ฉันเขียนโซลูชันหลายชุดคุณสามารถอ้างถึงพวกเขาได้ หากคุณมีวิธีการที่ดีแบ่งปันมันมาดูกันเถอะ
html:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> องค์ประกอบซ้อนกันกับหลายเลเยอร์ปัญหาการได้มาของ JS </title> </head> href = ""> <span> 1 </span> </a> </div> <div> <a href = ""> <span> 2 </span> </a> </div> <div> <a href = ""> <span> 3 </span>
ฉันต้องการได้รับช่วงด้านล่าง
แนวคิดที่ 1: ก่อนอื่นรับองค์ประกอบหลักจากนั้นรับองค์ประกอบด้านล่างองค์ประกอบนี้ผ่าน A for loop จากนั้นวนองค์ประกอบด้านล่างผ่านองค์ประกอบที่ได้รับในครั้งนี้จนกว่าจะได้องค์ประกอบเป้าหมาย
// รับองค์ประกอบหลัก var dbox = document.getElementById ('box'); // รับ divvar ddiv ทั้งหมด = dbox.getElementByTagname ('div'); // ใส่แท็กทั้งหมดใน darr var aarr = []; i = 0; i <ddiv.length; i ++) {aarr.push (ddiv [i] .getElementsByTagname ('a') [0]);} // รับ spanvar spanarr = []; สำหรับ (var (var i = 0; i <aarr.length; i ++) {spanarr.push (aarr [i] .getElementsByTagname ('span') [0]);} console.log (spanarr);ข้อเสีย: การบริโภคประสิทธิภาพ หากคุณทำรังไปอีกเล็กน้อยมันจะค่อนข้างลำบากในการรับองค์ประกอบเป้าหมาย
แนวคิดที่ 2: ใช้องค์ประกอบหลักเพื่อรับองค์ประกอบเป้าหมายโดยตรง แต่มีปัญหาอย่างแน่นอนในการทำเช่นนี้เพราะมันจะได้รับช่วงทั้งหมดภายใต้องค์ประกอบหลัก ความคิดของฉันคือการตัดสินว่าองค์ประกอบหลักเป็นแท็กหรือไม่
var box = document.getElementById ('box'); // รับ spanvar span = box.getElementsByTagname ('span'); // กำหนดอาร์เรย์เพื่อบันทึก spanvar arr = []; สำหรับ (var i = 0; if (span [i] .parentNode.tagname === 'a') {arr.push (span [i]);}} console.log (arr);แม้ว่า Idea 1 และ Idea 2 ก็โอเคพวกเขามีข้อบกพร่องจริง ๆ หากเลย์เอาต์มีความซับซ้อนมากขึ้นสิ่งที่คุณอาจได้รับอาจไม่ถูกต้อง
หากคุณต้องการได้อย่างถูกต้องคุณสามารถเพิ่มคลาสลงในแต่ละองค์ประกอบ แต่สำหรับชั้นเรียนเบราว์เซอร์มีปัญหาความเข้ากันได้
ทันใดนั้นฉันก็คิดถึงวิธีอื่น
แนวคิด: โดยการปรับแต่งแอตทริบิวต์ แต่เนื่องจากมีปัญหาความเข้ากันได้กับการได้รับแอตทริบิวต์ที่กำหนดเอง JS ใน JS ฉันจึงใช้ความสม่ำเสมอเพื่อตัดสินว่าองค์ประกอบนี้มีคุณลักษณะที่กำหนดเองของฉันหรือไม่
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> องค์ประกอบซ้อนกันกับหลายเลเยอร์ปัญหาการได้มาของ JS </title> </head> ISSPAN = 'span'> 1 </span> </a> </div> </div> <a href = ""> <span isspan = 'span'> 2 </span> </a> </div> <a href = ""> <span isspan = 'span'> 3 </a> </a>
JS
// รับองค์ประกอบหลัก var dbox = document.getElementById ('box'); // รับองค์ประกอบลูกทั้งหมด var dspan = dbox.getElementByTagname ('span'); // องค์ประกอบปัจจุบัน var str = ''; dspan [i] .outerhtml; console.log (str); // พิจารณาว่าองค์ประกอบปัจจุบันมีแอตทริบิวต์ที่กำหนดเองหรือไม่ถ้า (/isspan = "span"/. ทดสอบ (str)) {// ถ้าเป็นเช่นนั้นเพิ่มลงในอาร์เรย์ Spans.push (dspan [i]);}} console.log (Spans);ขอแนะนำให้ใช้คลาสหรือแอตทริบิวต์ที่กำหนดเองเพื่อให้ได้มาและวิธีแรกและวิธีที่สองไม่ถูกต้อง
ข้างต้นคือการทำรังแบบหลายชั้นขององค์ประกอบ JS ที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณและฉันหวังว่าคุณจะสนับสนุนเว็บไซต์ Wulin.com เพิ่มเติม!