إذا كانت فقرة من HTML متداخلة للغاية ، فلا يزال الأمر مزعجًا للغاية في JS. لقد كتبت عدة مجموعات من الحلول ، يمكنك الرجوع إليها. إذا كان لديك طريقة جيدة ، شاركها ، دعنا نلقي نظرة.
HTML:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> تتداخل العناصر بطبقات متعددة ، مشكلة اكتساب JS </title> </head> <body> <div id = "box"> span </span> <siv> </span> HREF = ""> <span> 1 </span> </a> </viv> <viv> <a href = ""> <span> 2 </aa> </a> <viv> <iv> <a href = ""> <span> </span> </a> </viv> </html>
أريد الحصول على المدى أدناه.
الفكرة 1: احصل أولاً على العنصر الأصل ، ثم احصل على العناصر الموجودة أسفل هذا العنصر من خلال حلقة ، ثم حلقة العناصر أدناه من خلال العناصر التي تم الحصول عليها هذه المرة حتى يتم الحصول على العنصر المستهدف.
// احصل على العنصر الأصل var dbox = document.getElementById ('box') ؛ // الحصول على كل divvar ddiv = dbox.getElementsByTagName ('div') ؛ // ضع جميع العلامات في darr var aarr = [] ؛ i = 0 ؛ i <ddiv.length ؛ i ++) {aarr.push (ddiv [i] .getElementsByTagName ('a') [0]) ؛} // الحصول على كل spanvar spanarr = [] ؛ for (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 ard arr = [] ؛ من أجل (var i = 0 ؛ i <span.length ؛ i ++) {// if (span [i] .parentnode.tagname === 'a') {arr.push (span [i]) ؛}} console.log (arr) ؛على الرغم من أن الفكرة 1 و IDEA 2 على ما يرام ، إلا أنهما في الواقع أوجه القصور. إذا كان التصميم أكثر تعقيدًا ، فقد لا يكون ما قد تحصل عليه دقيقًا للغاية.
إذا كنت ترغب في الحصول عليها بدقة ، فيمكنك إضافة فصل إلى كل عنصر. ولكن بالنسبة للطبقة ، فإن المتصفح لديه قضايا التوافق.
فجأة فكرت في طريقة أخرى.
الفكرة: من خلال تخصيص السمات ، ولكن نظرًا لوجود مشكلات توافق مع الحصول على سمات مخصصة JS في JS ، أستخدم الانتظام للحكم على ما إذا كان هذا العنصر لديه سماتي المخصصة.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> تتداخل العناصر بطبقات متعددة ، مشكلة اكتساب JS </title> </head> <body> <div id = "box"> </span> <viv> span> ISSPAN = 'span'> 1 </span> </a> </viv> <viv> <a href = ""> <spanspan = 'span'> 2 </span> </a> </viv> <a href = ""> <spans isspan = 'span'>
JS
// احصل على العنصر الأصل var dbox = document.getElementById ('box') ؛ // الحصول على جميع عناصر الطفل var dspan = dbox.getElementsByTagName ('span') ؛ // العنصر الحالي var str = '' ؛ dspan [i] .outerhtml ؛ console.log (str) ؛ // حدد ما إذا كان العنصر الحالي لديه سمة مخصصة إذا كان (/isspan = "span"/. test (str)) {// إذا كان الأمر كذلك ، أضفه إلى تمارير الصفيف.يوصى باستخدام الصفات الفئة أو المخصصة للحصول عليها ، والطرق الأولى والثانية غير دقيقة.
ما سبق هو التعشيش متعدد الطبقات لعناصر JS التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك ، وآمل أن تدعم موقع Wulin.com أكثر!