اذهب إلى المحتوى
  • 0

سؤال في console

السؤال

نشر

image.png.4a9a5b14a354447633a4b37ad9731035.png

ببقى عايز العنصر ظاهر كدا كامل بيقوم ظاهر ليا ب الشكل دا image.png.95c89bd3242df7ee598a0f0d22405352.png

بقعد اعمل ريفريش كتير قوي قوي جدا عشان يظهر وبعدين اعمل رفريش تانيه يروح اي هى المشكلة ، الكود مفيش فيه اي مشكلة ولا اي حاجه مع العلم

Recommended Posts

  • 0
نشر

ما الحاجة إلى ذلك، لديك  inspect element بالفعل، ما تحتاجه هو الكائن.

في المرة الأولى أو عند كتابة الكود مباشرة في الكونسول، تكون الصفحة تم تحميلها بالكامل ويستطيع محرك المتصفح ربط عنصر الـ DOM بواجهة أدوات المطورين، وعندما تطلب العنصر، يعرضه لك المتصفح مباشرة بالشكل الرسومي المعتاد كعنصر HTML تفاعلي.

لكن عندما تضغط على زر تحديث الصفحة، يمسح المتصفح كل شيء ويبدأ ببناء الصفحة من الصفر مجدداً، وأثناء تلك العملية السريعة، يمر المتصفح بمرحلتين:

  1. مرحلة البناء: يقوم فيها بتحميل الهيكل وتنسيقات الـ CSS، وفي نفس اللحظة ينفذ كود ملف الـ script.js تلقائياً لأن المتصفح مشغول بالبناء، تظهر لك النتيجة ككائن.
  2. مرحلة الاستقرار: بعد ثانية أو ثانيتين، ينتهي المتصفح،  لذا تظهر النتيجة كـ HTML تفاعلي.

ستحتاج إلى استخدام setTimeout لتأخير عملية الطباعة لبضعة أجزاء من الثانية حتى يستقر المتصفح وينتهي من العمليات الحاجبة للرندر مثل تحميل التنسيقات.

لمنح الوقت الكافي لأدوات المطورين لإكمال المزامنة والحصول على معرف العنصر من محرك الرندرة بعد زوال انشغاله.

setTimeout(() => {
    console.log(document.querySelector('.three'));
}, 100);

 

  • 0
نشر

هذا الأمر يعتمد على تحميل العنصر في الصفحة فلو تم تحميله ستظهر كما في الصورة الأولى وعند الضغط عليه يذهب مباشرة إلى العنصر في ال DOM .

ولهذا الأفضل دائما وضع أكواد جافاسكريبت في نهاية الصفحة في جسم ال body وذلك حتى تتأكد من أن جميع العناصر قد تم إنشائها ووضعها في ال DOM

  • 0
نشر

تأكد من أن كود الـ JavaScript يعمل بعد اكتمال تحميل DOM، إما بوضع وسم <script> في نهاية الـ <body>، أو باستخدام defer، أو بتغليف الكود داخل حدث DOMContentLoaded كالتالي

document.addEventListener("DOMContentLoaded", () => {
  console.log(document.querySelector(".three"));
});

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...