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

Kayce Basques

Sofia Emelianova

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

يفترض هذا البرنامج التعليمي أنك تعرف الفرق بين DOM وHTML. راجِع الملحق: HTML في مقابل DOM للحصول على توضيح.

عرض عُقد DOM

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

فحص عقدة

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

1. انقر بزر الماوس الأيمن على مايكل أنجلو في الأسفل واختَر فحص.
   • مايكل أنجلو
   • رافاييل سيتم فتح لوحة العناصر في "أدوات مطوري البرامج". تم تمييز <li>Michelangelo</li> في شجرة DOM.
2. انقر على رمز فحص في أعلى يمين أدوات مطوري البرامج.

3. انقر على النص طوكيو أدناه.

   • طوكيو

   • بيروت

     الآن، تم تمييز <li>Tokyo</li> في شجرة DOM.

كما أن فحص العقدة هو الخطوة الأولى لعرض أنماط العقدة وتغييرها. راجِع بدء استخدام العرض وتغيير CSS.

التنقل في شجرة DOM باستخدام لوحة مفاتيح

بعد اختيار عُقدة في شجرة نموذج العناصر في المستند (DOM)، يمكنك التنقّل في شجرة نموذج العناصر في المستند باستخدام لوحة المفاتيح.

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

   • George
   • رينغو
   • Paul

   • John

     

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

   

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

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

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

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

التمرير للوصول إلى العرض

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

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

   • ماغريت
   • سوتين

2. انتقِل إلى قسم الملحق: الانتقال إلى العرض في أسفل هذه الصفحة. تستمر التعليمات هناك.

بعد إكمال التعليمات الموجودة في أسفل الصفحة، يجب أن ترجع مرة أخرى إلى هنا.

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

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

يمكنك تفعيل أدوات قياس المسافات بإحدى الطريقتين التاليتين:

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

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

البحث عن عُقد

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

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

3. اكتب The Moon is a Harsh Mistress. يتم تمييز الجملة الأخيرة في شجرة DOM.

   

كما ذكرنا أعلاه، يتوافق شريط البحث أيضًا مع محددات CSS وXPath.

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

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

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

يمكنك تعديل نموذج العناصر في المستند (DOM) بسرعة ومعرفة مدى تأثير تلك التغييرات في الصفحة.

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

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

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

   • قلي
   • ليلى

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

   

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

تعديل السمات

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

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

   • Howard
   • فينس

2. انقر مرّتين على <li>. يتم تمييز النص للإشارة إلى تحديد العقدة.

   

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

   

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

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

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

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

   • العمادة
   • CANNOT TRANSLATE
   • ثاديوس
   • بروك

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

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

   

التعديل كـ HTML

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

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

   • بنس
   • Howard
   • زين
   • Leonard

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

   

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

   

   ملاحظة: بالإضافة إلى ذلك، يمكن لـ "أدوات مطوري البرامج" إكمال سمات DOM تلقائيًا.

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

   

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

   

إنشاء نسخة طبق الأصل من عقدة

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

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

   • موقد الزينة
   • نانا
   • أورلاندو
   • الضوضاء البيضاء

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

   

3. ارجع إلى الصفحة. تم تكرار عنصر القائمة على الفور.

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

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

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

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

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

   

3. سيتم حفظ لقطة الشاشة في المحتوى الذي تم تنزيله.

   

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

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

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

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

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

   

فرض الحالة

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

1. مرِّر مؤشر الماوس فوق The Lord of the Flies أدناه. يصبح لون الخلفية برتقاليًا.

   • فيلم The Lord of the Flies
   • جرائم وعقاب
   • موبي ديك

2. انقر بزر الماوس الأيمن على The Lord of the Flies أعلاه واختَر فحص.

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

إخفاء عقدة

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

1. انقر بزر الماوس الأيمن على The Stars My Destination (وجهتي بالنجوم) أدناه واختَر فحص.

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

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

   

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

حذف عقدة

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

1. انقر بزر الماوس الأيمن على Foundation (مؤسسة) أدناه واختَر Inspect (فحص).

   • الرجل المصوّر
   • عبر عدسة الكاميرا
   • مؤسسة

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

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

عُقد الوصول في وحدة التحكّم

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

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

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

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

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

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

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

   

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

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

   

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

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

1. انقر بزر الماوس الأيمن على The Big Sleep أدناه واختَر Inspect (فحص).

   • النوم الكبير
   • وداعًا طويلاً

2. انقر بزر الماوس الأيمن على <li>The Big Sleep</li> في شجرة نموذج العناصر في المستند (DOM) واختَر المتجر كمتغيّر عمومي. يُرجى مراجعة الملحق: خيارات غير متوفّرة في حال عدم ظهور هذا الخيار.

3. اكتب temp1 في "وحدة التحكّم" ثم اضغط على Enter. توضح نتيجة التعبير أن المتغير يقوم بتقييم العقدة.

   

نسخ مسار JavaScript

انسخ مسار JavaScript إلى عقدة عندما تحتاج إلى الرجوع إليها في اختبار مبرمَج.

1. انقر بزر الماوس الأيمن على The Brothers Karamazov (الأخوان كارامازوف) أدناه واختَر فحص.

   • الأخوان كارامزوف
   • جرائم وعقاب

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

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

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

   

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

تتيح لك "أدوات مطوّري البرامج" إيقاف JavaScript على الصفحة مؤقتًا عندما تعدّل JavaScript نموذج العناصر في المستند. يُرجى الاطّلاع على النقاط الفاصلة لتغيير نموذج العناصر في المستند (DOM).

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

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

يمكنك مراجعة الصفحة الرئيسية لأدوات مطوري البرامج في Chrome للاطّلاع على كل الإجراءات التي يمكنك اتّخاذها باستخدام أدوات مطوّري البرامج.

انتقِل إلى المنتدى إذا أردت التواصل مع فريق "أدوات مطوري البرامج" أو الحصول على مساعدة من منتدى أدوات مطوّري البرامج.

الملحق: 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. في الوقت الحالي، يبدو نفس الشيء مثل HTML، لكن لنفترض أن النص البرمجي المشار إليه أسفل 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) لمزيد من المعلومات.

الملحق: الانتقال للأعلى أو للأسفل

هذه مواصلة لقسم الانتقال للأعلى أو للأسفل في الفيديو. اتبع الإرشادات أدناه لإكمال القسم.

1. يجب اختيار العُقدة <li>Magritte</li> في شجرة نموذج العناصر في المستند. إذا لم يكن الأمر كذلك، يمكنك الرجوع إلى التمرير إلى العرض والبدء من جديد.

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

   

الملحق: خيارات مفقودة

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