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

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

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

عرض عُقد DOM

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

فحص عقدة

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

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

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

   • طوكيو

   • بیروت

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

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

التنقل في شجرة 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. انتقِل إلى قسم الملحق: الانتقال إلى العرض في أسفل هذه الصفحة. تستمر التعليمات هناك.

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

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

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

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

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

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

البحث عن عُقد

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

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

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

   

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

تختار لوحة Elements أول نتيجة مطابقة في شجرة نموذج العناصر في المستند ويعرضها في إطار العرض. يحدث هذا تلقائيًا أثناء الكتابة. إذا كنت تستخدم دائمًا طلبات البحث الطويلة، يمكنك جعل "أدوات مطوري البرامج" تجري البحث فقط من خلال الضغط على 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
   • Thaddeus
   • بروك

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

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

   

التعديل كـ HTML

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

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

   • بنس
   • Howard
   • Rajesh
   • Leonard

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

   

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

   

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

   

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

   

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

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

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

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

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

   

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

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

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

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

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

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

   

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

   

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

إعادة ترتيب عُقد 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 في وحدة التحكّم مرة أخرى، ثم اضغط على يُرجى إدخال مجددًا. والآن، يتم تقييم الدالة $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) في "أدوات مطوّري البرامج". يمكنك اكتشاف الباقي النقر بزر الماوس الأيمن على العُقد في شجرة نموذج العناصر في المستند وتجربة الخيارات الأخرى غير المتوفرة التي تم تناولها في هذا البرنامج التعليمي. راجِع أيضًا اختصارات لوحة المفاتيح للوحة العناصر.

يمكنك الاطلاع على الصفحة الرئيسية لأدوات مطوري البرامج في 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). ثم حدد خيارًا من قائمة السياقات المنبثقة. إذا لم تظهر لك قيم في قائمة السياق، جرب النقر بزر الماوس الأيمن بعيدًا عن نص العقدة.