تقنيات اجتياز DOM بكفاءة
أتقن أساليب مثل .closest() و.siblings() و.find() و.parentsUntil() للتنقّل بكفاءة في شجرة DOM وتجنّب اختناقات الأداء.
تقنيات اجتياز DOM بكفاءة درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.
التنقل في شجرة DOM
مرحبًا! في هذا الدرس، سنتقن تقنيات فعّالة للتنقل داخل نموذج كائن المستند (DOM).
يشبه DOM شجرة عائلة لعناصر صفحة الويب. ويسمح لك فهم كيفية اجتيازه بتحديد العناصر بدقة، حتى من دون معرّفات أو أصناف مباشرة.
- الاجتياز: الانتقال أو التحرك عبر شيء أو خلاله.
- DOM: التمثيل الداخلي لبنية HTML في المتصفح.
العثور على العناصر المتحدرة باستخدام .find()
تُعد الطريقة .find() مثالية للعثور على العناصر المتحدرة. فهي تبحث *داخل* العناصر المحددة حاليًا عن أي عناصر مطابقة.
فكّر فيها كأنك تبحث عن عناصر محددة داخل صندوق معين. وهي مفيدة جدًا لتضييق نطاق البحث.
- البنية:
$(selector).find(filterSelector) - القيمة المُعادة: كائن jQuery جديد يحتوي على العناصر المتحدرة التي عُثر عليها.
.find() عمليًا
لنَعثر على جميع عناصر القائمة (<li>) داخل قائمة غير مرتبة محددة (<ul>).
جرّب تشغيل الرمز وشاهد أي العناصر سيحصل على خلفية خضراء!
<div id="container">
<ul id="myList">
<li>Item 1</li>
<li class="active">Item 2</li>
<li>Item 3</li>
</ul>
<p>Some other text</p>
<ul id="anotherList">
<li>Item A</li>
<li>Item B</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all <li> elements within #myList
$('#myList').find('li').css('background-color', 'lightgreen');
// You can also chain with specific selectors
$('#myList').find('.active').css('font-weight', 'bold');
});
</script>الصعود باستخدام .closest()
قد تحتاج أحيانًا إلى العثور على سلف عنصر ما (مثل العنصر الأب أو الجد). تنفّذ الطريقة .closest() ذلك تمامًا.
تبدأ من العنصر الحالي وتتحرك *صعودًا* في شجرة DOM، ثم تعيد *أول* سلف يطابق المحدد المُقدَّم.
- البنية:
$(selector).closest(filterSelector) - القيمة المُعادة: كائن jQuery يحتوي على أقرب سلف واحد.
.closest() عمليًا
تخيّل أنك نقرت على زر موجود في عمق بنية متداخلة. وتريد العثور على الحاوية الرئيسية له. تُعد .closest() مثالية لهذا الغرض.
انقر على الزر أدناه لتمييز أقرب سلف له من نوع <div>.
<div class="grandparent">
<div class="parent">
<p>Some text here</p>
<button id="myButton">Click Me</button>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click', function() {
// Find the closest ancestor div and add a border
$(this).closest('div').css('border', '2px solid blue');
});
});
</script>استكشاف العناصر الشقيقة باستخدام .siblings()
تُسمى العناصر الموجودة في المستوى نفسه من شجرة DOM «العناصر الشقيقة». وتساعدك الطريقة .siblings() في تحديدها جميعًا.
تعثر الطريقة على جميع العناصر التي تشترك مع العنصر الحالي في العنصر الأب نفسه، مع *استثناء* العنصر الحالي.
- البنية:
$(selector).siblings(filterSelector) - القيمة المُعادة: كائن jQuery جديد يحتوي على جميع العناصر الشقيقة.
.siblings() عمليًا
لنميّز جميع العناصر الشقيقة لعنصر قائمة محدد عند النقر عليه. وهذا مفيد للقوائم أو القوائم التفاعلية.
انقر على أي عنصر في القائمة لترى تغيّر لون عناصره الشقيقة!
<ul id="menu">
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#menu li').on('click', function() {
// Remove highlight from previously selected siblings
$('#menu li').css('background-color', '');
// Highlight the clicked item's siblings
$(this).siblings().css('background-color', 'lightyellow');
// Highlight the clicked item itself (optional)
$(this).css('background-color', 'lightblue');
});
});
</script>التنقل صعودًا باستخدام .parentsUntil()
ماذا لو أردت تحديد *عدة* أسلاف، لكنك تريد التوقف عند نقطة معينة؟ هنا تأتي فائدة .parentsUntil().
تتحرك هذه الطريقة صعودًا في شجرة DOM، فتحدد جميع أسلاف العنصر الحالي *حتى* تصل إلى عنصر يحدده المحدد. ولا يُضمَّن عنصر «التوقف» نفسه.
- البنية:
$(selector).parentsUntil(stopSelector, filterSelector) - القيمة المُعادة: كائن jQuery يحتوي على الأسلاف المحددين.
.parentsUntil() عمليًا
لدينا بنية متداخلة بعمق. لنحدد جميع العناصر الأب لعنصر <span> حتى نصل إلى عنصر <div class="container"> محدد.
شغّل هذا المثال لترى العناصر التي ستحصل على حد، ولاحظ أن عنصر div الذي يحمل الصنف 'container' نفسه تم تخطيه!
<div class="body-wrapper">
<div class="container">
<div class="row">
<section>
<article>
<p>Hello <span>World!</span></p>
</article>
</section>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Find all parents of 'span' until the '.container' div
$('span').parentsUntil('.container').css('border', '1px dashed orange');
});
</script>تحقق سريع
لديك عنصر <img> متداخل داخل <div class="gallery-item">، وهذا العنصر موجود داخل <div class="gallery-row">. إذا حدّدت عنصر <img>، فما طريقة jQuery التي ستستخدمها للحصول على <div class="gallery-item"> *فقط*؟
مراجعة: الاجتياز الفعّال لـ DOM
أحسنت! لقد أتقنت أهم طرق jQuery لاجتياز DOM بكفاءة:
.find(): تبحث *داخل* العناصر عن العناصر المتحدرة..closest(): تعثر على *أقرب سلف* يطابق محددًا، بالتحرك *صعودًا* في الشجرة..siblings(): تحدد جميع العناصر الموجودة في *المستوى نفسه* للعنصر الحالي، مع استثنائه..parentsUntil(): تحدد عدة أسلاف *حتى* عنصر توقف محدد، من دون تضمينه.
يساعدك استخدام هذه الطرق بحكمة على كتابة رمز jQuery أدق وأعلى أداءً وأسهل قراءةً لتطبيقات الويب الديناميكية!
الأسئلة الشائعة
هل درس «تقنيات اجتياز DOM بكفاءة» مجاني؟
نعم — نص درس «تقنيات اجتياز DOM بكفاءة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.
ماذا ستتعلم في «تقنيات اجتياز DOM بكفاءة»؟
أتقن أساليب مثل .closest() و.siblings() و.find() و.parentsUntil() للتنقّل بكفاءة في شجرة DOM وتجنّب اختناقات الأداء. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟
لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «تقنيات اجتياز DOM بكفاءة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟
نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- محدّدات السمات المتقدّمة
- الأصناف الزائفة والمحدّدات المخصّصة
- تقنيات اجتياز DOM بكفاءة