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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

عرض عُقد DOM

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

فحص عقدة

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

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

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

    • طوكيو

    • بیروت

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

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

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

بعد اختيار عقدة في "شجرة نموذج DOM"، يمكنك التنقّل في "شجرة نموذج DOM" باستخدام ال keyboard.

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

    • George
    • رينغو
    • Paul

    • John

      فحص عقدة Ringo

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

    فحص عقدة ul

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

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

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

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

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

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

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

    • Magritte
    • Soutine

  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.

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

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

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

تعديل نموذج DOM

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

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

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

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

    • فريدة
    • ليلى

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

    تعديل النص

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

تعديل السمات

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

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

    • Howard
    • فينس

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

    تعديل العقدة

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

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

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

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

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

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

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

    • العمادة
    • CANNOT TRANSLATE
    • ثروت
    • شريف

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    جارٍ تطبيق التغييرات.

تكرار عقدة

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

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

    • Bonfire of the Vanities
    • نانا
    • أورلاندو
    • الضوضاء البيضاء

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

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

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

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

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

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

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

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

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

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

    تم حفظ لقطة شاشة العُقدة في عمليات التنزيل.

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

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

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

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

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

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

    سحب العقدة إلى أعلى القائمة

فرض الحالة

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

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

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

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

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

إخفاء عقدة

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

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

    • الكونت مونتي كريستو
    • The Stars My Destination

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

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

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

حذف عقدة

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

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

    • الرجل المخطَّط
    • من خلال المرآة
    • مؤسسة

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    • The Big Sleep
    • The Long Goodbye

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

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

    نتيجة تعبير temp1

نسخ مسار JavaScript

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

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

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

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

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

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

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

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

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