0Pricing
Sveltejs Academy · درس

bind:this لمراجع عناصر DOM

احصل على مرجع إلى عقدة DOM لإجراء تفاعلات أمرية

bind:this لمراجع عناصر DOM درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

الحصول على مرجع DOM

استخدموا bind:this للحصول على مرجع إلى عنصر DOM، على غرار useRef في React.

الإعلان والربط

أعلنوا عن متغير ثم اربطوه.

<script>
  let inputEl;
</script>

<input bind:this={inputEl} />

يتوفر بعد التركيب

يكون المرجع null حتى يتركب المكوّن. استخدموا onMount للوصول إليه بأمان.

<script>
  import { onMount } from "svelte";
  let inputEl;
  onMount(() => inputEl.focus());
</script>

الأساليب الأمرية

استدعوا أساليب DOM مثل focus() وscrollIntoView()، أو شغّلوا الوسائط.

function play() { audioEl.play(); }

قراءة التخطيط

استخدموا getBoundingClientRect() للحصول على القياسات. وأحاطوا الاستدعاء بـ tick() إذا كنتم قد أجريتم تغييرات للتو.

مراجع المكوّنات

يعمل bind:this مع مكوّنات Svelte أيضًا. ويحتفظ المتغير بنسخة المكوّن.

<MyComp bind:this={comp} />

استدعاء أساليب المكوّن

يمكن استدعاء الأساليب المُصدَّرة من المكوّن (عبر export function) من خلال المرجع.

عناصر متعددة

بالنسبة إلى القوائم، يمكنكم جمع المراجع في مصفوفة، لكن فكّروا في استخدام الإجراءات بدلًا من ذلك.

متى نتجنب استخدامه

فضّلوا عمليات الربط التصريحية والحالة التفاعلية على المراجع الأمرية كلما أمكن.

التنظيف

يصبح المرجع null عند إزالة تركيب العنصر. تجنّبوا المراجع القديمة.

الدمج مع الإجراءات

بالنسبة إلى أنماط DOM المتكررة، غلّفوها في إجراء Svelte بدلًا من استخدام bind:this.

تحقق سريع

متى يمكنكم استخدام العنصر المرتبط؟

مراجعة

يتيح bind:this مرجعًا إلى DOM أو إلى مكوّن، ويتوفر بدءًا من onMount لتنفيذ العمليات الأمرية.

الأسئلة الشائعة

هل درس «bind:this لمراجع عناصر DOM» مجاني؟

نعم — نص درس «bind:this لمراجع عناصر DOM» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

ماذا ستتعلم في «bind:this لمراجع عناصر DOM»؟

احصل على مرجع إلى عقدة DOM لإجراء تفاعلات أمرية تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟

لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «bind:this لمراجع عناصر DOM»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟

نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. bind:value لحقول النص
  2. bind:checked لمربعات الاختيار
  3. bind:group لمجموعات أزرار الاختيار ومربعات الاختيار
  4. bind:this لمراجع عناصر DOM
← العودة إلى Sveltejs Academy