البدء بعرض نموذج العناصر في المستند (DOM) وتغييره

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

يفترض هذا البرنامج التعليمي أنّك تعرف الفرق بين نموذج المستند (DOM) ولغة HTML. يمكنك الاطّلاع على معلومات أساسية في الملحق: HTML مقابل نموذج المستند.

عرض عُقد DOM

شجرة DOM في لوحة العناصر هي المكان الذي يمكنك فيه تنفيذ جميع الأنشطة ذات الصلة بـ DOM في "أدوات مطوّلي البرامج".

فحص عقدة

عندما يهمّك عنصر DOM معيّن، يمكنك استخدام خيار فحص كطريقة سريعة لفتح "أدوات مطوّري البرامج" والتحقيق في هذا العنصر.

  1. في القائمة التالية، انقر بزر الماوس الأيمن على مايكل أنجلو. من القائمة، انقر على فحص.

    • مايكل أنجلو
    • رافائيل

    تفتح لوحة العناصر في "أدوات مطوّري البرامج". يتم تمييز <li>Michelangelo</li> في شجرة نموذج العناصر في المستند.

    تسليط الضوء على عقدة &quot;مايكل أنجلو&quot;

  2. انقر على اختيار عنصر.

  3. اختَر طوكيو من القائمة التالية.

    • طوكيو
    • بیروت

    يتم تمييز <li>Tokyo</li> في "شجرة DOM".

فحص عنصر هو أيضًا الخطوة الأولى نحو عرض الأنماط وCSS الخاصة بالعنصر وتغييرها.

التنقّل في "شجرة نموذج العناصر في المستند" باستخدام لوحة المفاتيح

بعد اختيار عقدة في &quot;شجرة نموذج العناصر في المستند&quot;، يمكنك التنقّل في &quot;شجرة نموذج العناصر في المستند&quot; باستخدام لوحة المفاتيح.

  1. من القائمة التالية، انقر بزرّ الماوس الأيمن على Ringo واختَر فحص. تم اختيار <li>Ringo</li> في "شجرة نموذج العناصر في المستند".

    • George
    • رينغو
    • Paul

    • John

      فحص عقدة Ringo

  2. اضغط على مفتاح السهم المتّجه للأعلى مرّتين. تم اختيار <ul>.

    فحص عقدة ul

  3. اضغط على مفتاح السهم المتّجه لليسار. يتم تصغير قائمة <ul>.

  4. اضغط على مفتاح السهم المتّجه لليسار مرة أخرى. تم اختيار العنصر الرئيسي للعقدة <ul>. في هذه الحالة، تكون العقدة <li> هي التي تحتوي على التعليمات الخاصة بالخطوة 1.

  5. اضغط على مفتاح السهم للأسفل 3 مرات لإعادة اختيار القائمة <ul> التي تم تصغيرها للتو. يجب أن يظهر على النحو التالي: <ul>...</ul>

  6. اضغط على مفتاح السهم المتّجه لليسار. تتوسّع القائمة.

التمرير للعرض

عند عرض &quot;شجرة نموذج العناصر في المستند&quot;، قد تجد نفسك أحيانًا في عقدة DOM غير مرئية في إطار العرض. على سبيل المثال، لنفترض أنّك انتقلت إلى أسفل الصفحة، وأنّك مهتم بعقدة <h1> في أعلى الصفحة. تتيح لك ميزة الانتقال إلى موضع العرض إعادة ضبط موضع نافذة العرض بسرعة حتى تتمكّن من رؤية العقدة.

  1. في القائمة التالية، انقر بزرّ الماوس الأيمن على Magritte واختَر فحص.

    • Magritte
    • Soutine

  2. انتقِل إلى قسم الملحق الانتقال إلى العرض للاطّلاع على تعليمات إضافية.

بعد الانتهاء من ذلك، يجب الانتقال مجددًا إلى هذا القسم.

إظهار القواعد

باستخدام المسطرة في إطار العرض، يمكنك قياس عرض العنصر وارتفاعه عند تمرير مؤشر الماوس فوقه في لوحة العناصر.

فعِّل المسطرتَين بإحدى الطريقتَين التاليتَين:

  • اضغط على Control+Shift+P أو Command+Shift+P (في نظام التشغيل macOS) لفتح قائمة الأوامر، واكتب Show rulers on hover، ثم اضغط على Enter.

وحدة قياس المسطرتَين هي البكسل.

يمكنك البحث في "شجرة نموذج المستند" (DOM) حسب السلسلة أو أداة اختيار لغة CSS أو أداة اختيار XPath.

  1. ركِّز مؤشر الماوس على لوحة العناصر.
  2. اضغط على Control+F أو Command+F (في نظام التشغيل macOS). يتم فتح شريط البحث في أسفل "شجرة نموذج العناصر في المستند".

  3. اكتب The Moon is a Harsh Mistress. يتم تمييز الجملة الأخيرة في &quot;شجرة نموذج المستند&quot;.

    تمييز طلب البحث في شريط البحث

يتوافق شريط البحث أيضًا مع أدوات اختيار CSS وXPath.

تختار لوحة العناصر أول نتيجة مطابقة في شجرة نموذج العناصر في المستند، ثم تعرضها في إطار العرض. ويحدث ذلك تلقائيًا أثناء الكتابة. إذا كنت تعمل دائمًا باستخدام طلبات بحث طويلة، يمكنك ضبط &quot;أدوات مطوّري البرامج&quot; على إجراء البحث فقط عند الضغط على Enter.

لتجنُّب التنقّل غير الضروري بين العُقد، ألغِ تحديد مربّع الاختيار الإعدادات > الإعدادات المفضّلة > عام > البحث أثناء الكتابة.

تم إلغاء تحديد مربّع الاختيار &quot;البحث أثناء الكتابة&quot; في &quot;الإعدادات&quot;.

تعديل نموذج المستند (DOM)

يمكنك تعديل نموذج المستند على الفور والاطّلاع على تأثير هذه التغييرات في الصفحة.

تعديل المحتوى

لتعديل محتوى عقدة، انقر مرّتين على المحتوى في "شجرة نموذج المستند" (DOM).

  1. في القائمة التالية، انقر بزر الماوس الأيمن على Michelle واختَر فحص.

    • قلي
    • ليلى

  2. في "شجرة نموذج العناصر في المستند"، انقر مرّتين على Michelle. بعبارة أخرى، انقر مرّتين على النص بين <li> و</li>. يتم تمييز النص باللون الأزرق للإشارة إلى أنّه محدّد.

    تعديل النص

  3. احذف Michelle، واكتب Leela، ثم اضغط على Enter لتأكيد التغيير. يتغيّر النص من Michelle إلى Leela.

تعديل السمات

لتعديل السمات، انقر نقرًا مزدوجًا على اسم السمة أو قيمتها. اتّبِع هذه التعليمات لمعرفة كيفية إضافة سمات إلى عقدة.

  1. في القائمة التالية، انقر بزرّ الماوس الأيمن على Howard واختَر فحص.

    • Howard
    • فينس

  2. وسِّع <ul>، ثم انقر مرّتين على <li> للتعديل. يتم تمييز النص للإشارة إلى أنّه تم اختيار العقدة.

    بعد النقر عليها، يتم تمييز العقدة للإشارة إلى اختيارها.

  3. اضغط على مفتاح السهم المتّجه لليسار، وأضِف مسافة، واكتب style="background-color:gold"، ثم اضغط على مفتاح Enter. يتغيّر لون خلفية العقدة إلى الذهبي.

    إضافة سمة نمط إلى العقدة

تعديل نوع العقدة

لتعديل نوع عقدة، انقر مرّتين على النوع ثم اكتب النوع الجديد.

  1. في القائمة التالية، انقر بزر الماوس الأيمن على Hank واختَر فحص.

    • دين
    • CANNOT TRANSLATE
    • ثاديوس
    • بروك

  2. انقر مرّتين على <li>. يتم تمييز النص li.

  3. احذف li، واكتب button، ثم اضغط على Enter. تتغيّر العقدة <li> إلى العقدة <button>.

    تغيير نوع العقدة إلى زر

التعديل كتنسيق HTML

لتعديل العُقد كرمز HTML مع تمييز بناء الجملة والإكمال التلقائي، اختَر تعديل كرمز HTML من القائمة المنسدلة للعقدة.

  1. انقر بزرّ الماوس الأيمن على ليونارد أدناه واختَر فحص.

    • بنس
    • Howard
    • راجيش
    • Leonard

  2. في لوحة العناصر، انقر بزر الماوس الأيمن على العقدة الحالية واختَر تعديل كـ HTML من القائمة المنسدلة.

    القائمة المنسدلة لعقدة

  3. اضغط على Enter لبدء سطر جديد وابدأ بكتابة <l. تُبرز أداة DevTool بنية HTML وتقترح علامات للإكمال التلقائي.

    الإكمال التلقائي لعلامات HTML

  4. اختَر العنصر li من قائمة الإكمال التلقائي واكتب >. تضيف "أدوات مطوّري البرامج" تلقائيًا علامة الإغلاق </li> بعد المؤشر.

    تغلق &quot;أدوات مطوّري البرامج&quot; العلامة تلقائيًا.

  5. اكتب Sheldon داخل العلامة واضغط على Control أو Command + Enter لتطبيق التغييرات.

تكرار عقدة

يمكنك تكرار عنصر باستخدام خيار النقر بزر الماوس الأيمن تكرار العنصر.

  1. انقر بزرّ الماوس الأيمن على Nana في القائمة التالية واختَر فحص.

    • Bonfire of the Vanities
    • نانا
    • أورلاندو
    • White Noise

  2. في لوحة العناصر، انقر بزر الماوس الأيمن على <li>Nana</li> واختَر تكرار العنصر من القائمة المنسدلة.

    يتم تمييز خيار &quot;العنصر المكرّر&quot; في القائمة المنسدلة.

  3. الرجوع إلى الصفحة تم إنشاء نسخة طبق الأصل من عنصر القائمة.

يمكنك أيضًا استخدام اختصارات لوحة المفاتيح: Shift + Alt + السهم المتّجه للأسفل (في نظامَي التشغيل Windows وLinux) وShift + Option + السهم المتّجه للأسفل (في نظام التشغيل macOS).

التقاط لقطة شاشة للعقدة

يمكنك أخذ لقطة شاشة لأي عقدة فردية في "شجرة نموذج المستند".

  1. انقر بزرّ الماوس الأيمن على أي صورة في هذه الصفحة واختَر فحص.

  2. في لوحة العناصر، انقر بزر الماوس الأيمن على عنوان URL الخاص بالصورة واختَر أخذ لقطة شاشة للعقدة من القائمة المنسدلة.

    يتم التقاط لقطة شاشة للعقدة.

  3. يتم حفظ لقطة الشاشة في مجلد التنزيلات (Windows وmacOS).

يمكنك الاطّلاع على مزيد من المعلومات في المقالة 4 طرق لالتقاط لقطات شاشة باستخدام "أدوات مطوّري البرامج".

إعادة ترتيب عقد DOM

اسحب العُقد لإعادة ترتيبها.

  1. في القائمة التالية، انقر بزرّ الماوس الأيمن على إلفيس بريسلي واختَر فحص. هذا هو العنصر الأخير في القائمة.

    • ستيفي وندر
    • توم ويتس
    • Chris Thile
    • إلفيس بريسلي

  2. في "شجرة نموذج العناصر في المستند"، اسحب <li>Elvis Presley</li> إلى أعلى القائمة.

فرض الحالة

يمكنك فرض بقاء العُقد في حالات مثل :active و:hover و:focus و:visited و:focus-within.

  1. مرِّر مؤشر الماوس فوق عنصر القائمة أمير الذباب. يتحوّل لون الخلفية إلى البرتقالي.

    • أمير الذباب
    • الجريمة والعقاب
    • Moby Dick

  2. انقر بزرّ الماوس الأيمن على عنصر القائمة Lord of the Flies، ثمّ اختَر فحص.

  3. انقر بزر الماوس الأيمن على <li class="demo--hover">The Lord of the Flies</li> واختَر فرض الحالة > :hover. يُرجى قراءة الملحق حول الخيارات غير المتوفّرة، إذا لم يظهر لك هذا الخيار.

    يظل لون الخلفية برتقاليًا، حتى إذا لم تكن تحرّك مؤشر الماوس فوق العقدة.

إخفاء عقدة

اضغط على H لإخفاء عقدة.

  1. من القائمة التالية، انقر بزر الماوس الأيمن على The Stars My Destination واختَر فحص.

    • الكونت دي مونت كريستو
    • النجوم هي وجهتي

  2. اضغط على المفتاح H. العقدة مخفية. يمكنك أيضًا النقر بزر الماوس الأيمن على العقدة واستخدام الخيار إخفاء العنصر.

    الشكل الذي تبدو عليه العقدة في شجرة DOM بعد إخفائها

  3. اضغط على المفتاح H مرة أخرى. يتم عرض العُقدة مرة أخرى.

حذف عقدة

اضغط على Delete لحذف عقدة.

  1. من القائمة التالية، انقر بزرّ الماوس الأيمن على Foundation واختَر فحص.

    • الرجل المصوّر
    • عبر مرآة الزجاج
    • مؤسسة

  2. اضغط على مفتاح Delete. يتم حذف العُقدة. يمكنك أيضًا النقر بزر الماوس الأيمن على العقدة واستخدام الخيار حذف العنصر.

  3. اضغط على Control+Z أو Command+Z (في نظام التشغيل macOS). يتم التراجع عن الإجراء الأخير وتظهر العُقدة من جديد.

الوصول إلى العُقد في Console

توفّر &quot;أدوات مطوّري البرامج&quot; بعض الاختصارات للوصول إلى عُقد DOM من &quot;وحدة التحكّم&quot; أو للحصول على مراجع JavaScript إليها.

الإشارة إلى العقدة المحدّدة حاليًا باستخدام $0

عند فحص عقدة، يعني النص == $0 بجانب العقدة أنّه يمكنك الرجوع إلى هذه العقدة في &quot;وحدة التحكّم&quot; باستخدام المتغير $0.

  1. انقر بزرّ الماوس الأيمن على عنصر القائمة اليد اليسرى للظلام (The Left Hand of Darkness) واختَر فحص.

    • اليد اليسرى للظلام
    • Dune

  2. اضغط على مفتاح Escape لفتح "درج وحدة التحكّم". قد تحتاج إلى النقر على وحدة التحكّم لفتحها.

  3. اكتب $0 واضغط على مفتاح Enter. نتيجة التعبير هي أنّ قيمة $0 تصبح <li>The Left Hand of Darkness</li>.

    نتيجة التعبير الأول $0 في &quot;وحدة التحكّم&quot;

  4. مرِّر مؤشر الماوس فوق النتيجة. يتم تمييز العقدة في إطار العرض.

  5. انقر على <li>Dune</li> في &quot;شجرة نموذج المستند&quot;، واكتب $0 في &quot;وحدة التحكّم&quot; مرة أخرى، ثم اضغط على Enter مرة أخرى. الآن، يتم تقييم $0 بالقيمة <li>Dune</li>.

    نتيجة التعبير الثاني $0 في &quot;وحدة التحكّم&quot;

حفظ كمتغير عمومي

إذا كنت بحاجة إلى الرجوع إلى عقدة عدة مرات، يمكنك تخزينها كمتغير عام.

  1. في القائمة التالية، انقر بزرّ الماوس الأيمن على السبات الكبير واختَر فحص.

    • النوم الكبير
    • The Long Goodbye

  2. انقر بزر الماوس الأيمن على <li>The Big Sleep</li> في &quot;شجرة DOM&quot; واختَر تخزين كمتغيّر عام. إذا لم يظهر لك هذا الخيار، يمكنك الاطّلاع على معلومات حول الخيارات غير المتوفّرة.

  3. اكتب temp1 في "وحدة التحكّم"، ثم اضغط على Enter. تُظهر نتيجة التعبير أنّ المتغيّر يتم تقييمه إلى العقدة. انقر على العقدة لتوسيع عنصر القائمة.

    نتيجة التعبير temp1

نسخ مسار JavaScript

انسخ مسار JavaScript إلى عقدة للإشارة إليها في اختبار آلي.

  1. في القائمة التالية، انقر بزرّ الماوس الأيمن على الإخوة كارامازوف، ثمّ اختَر فحص.

    • الإخوة كارامازوف
    • الجريمة والعقاب

  2. انقر بزر الماوس الأيمن على <li>The Brothers Karamazov</li> في "شجرة نموذج المستند" (DOM) واختَر نسخ > نسخ مسار JavaScript. تم نسخ تعبير document.querySelector() الذي يؤدي إلى العقدة إلى الحافظة.

  3. اضغط على Control+V أو Command+V (في نظام التشغيل macOS) للصق التعبير في "وحدة التحكّم".

  4. اضغط على Enter لتقييم التعبير.

    نتيجة تعبير &quot;نسخ مسار JavaScript&quot;

التوقّف عند تغييرات DOM

تتيح لك "أدوات مطوّري Chrome" إيقاف JavaScript مؤقتًا في الصفحة عندما تعدّل JavaScript عناصر DOM. اطّلِع على نقاط التوقف عند تغيير DOM.

الخطوات التالية

يغطي ذلك معظم الميزات المتعلّقة بنموذج المستند (DOM) في "أدوات مطوّري البرامج". يمكنك استكشاف بقية الخيارات من خلال النقر بزر الماوس الأيمن على العُقد في &quot;شجرة DOM&quot; وتجربة الخيارات التي لم يتم تناولها في هذا البرنامج التعليمي.

مواصلة القراءة:

يمكنك المشاركة في منتدى أدوات مطوّري البرامج للتواصل مع فريق &quot;أدوات مطوّري البرامج&quot; أو الحصول على مساعدة من مطوّرين آخرين.

الملحق

مزيد من المعلومات حول مواضيع محدّدة

الفرق بين HTML وDOM

يوضّح هذا القسم سريعًا الفرق بين HTML وDOM.

عند استخدام متصفّح ويب لطلب صفحة مثل https://example.com، يعرض الخادم مستند HTML:

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

يحلّل المتصفّح لغة HTML وينشئ شجرة من الكائنات:

html
  head
    title
  body
    h1
    p
    script

تمثّل شجرة العناصر أو العُقد هذه محتوى الصفحة. يُطلق على هذا النموذج اسم نموذج كائن المستند أو DOM باختصار. في الوقت الحالي، تكون العناصر متطابقة في كلّ من DOM وHTML.

لنفترض أنّ ملف script.js في أسفل ملف HTML يتضمّن الدوال التالية:

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

يزيل هذا النص البرمجي العقدة h1 ويضيف عقدة p أخرى إلى نموذج DOM. يبدو DOM الآن على النحو التالي:

html
  head
    title
  body
    p
    script
    p

أصبح ملف HTML الخاص بالصفحة مختلفًا عن نموذج DOM.

تمثّل لغة HTML محتوى الصفحة الأولي، بينما يمثّل نموذج DOM محتوى الصفحة النشط والحالي. عندما تضيف JavaScript عقدًا أو تزيلها أو تعدّلها، يصبح نموذج DOM مختلفًا عن HTML.

يمكنك الاطّلاع على مزيد من المعلومات في مقدمة عن نموذج المستند (DOM) على شبكة مطوّلي Mozilla.

التمرير للعرض

هذا القسم هو استمرار لقسم الانتقال إلى العرض. اتّبِع التعليمات لإكمال القسم.

  1. يجب أن تظلّ عقدة <li>Magritte</li> محدّدة في "شجرة نموذج المستند". إذا لم يكن كذلك، ارجع إلى التمرير إلى العرض وابدأ من جديد.

  2. انقر بزرّ الماوس الأيمن على العقدة <li>Magritte</li> واختَر الانتقال إلى العرض. يتم إعادة تمرير نافذة العرض للأعلى لتتمكّن من رؤية عقدة Magritte. إذا لم يظهر لك خيار التمرير إلى العرض، يمكنك الاطّلاع على الخيارات غير المتوفّرة.

ما مِن خيارات متوفّرة

تطلب منك العديد من التعليمات الواردة في هذا البرنامج التعليمي النقر بزر الماوس الأيمن على عقدة في شجرة نموذج المستند (DOM)، ثم اختيار أحد الخيارات من قائمة السياق التي تظهر. إذا لم يظهر لك الخيار المحدّد في قائمة السياق، حاوِل النقر بزر الماوس الأيمن بعيدًا عن نص العقدة.

المكان الذي يجب النقر عليه إذا لم تظهر لك جميع الخيارات