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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

عرض عُقد نموذج DOM

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

فحص عقدة

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

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

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

    • طوكيو

    • بیروت

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

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

    • كمال
    • CANNOT TRANSLATE
    • ثروت
    • Brock

  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. سيتم حفظ لقطة الشاشة في مجلد "المحتوى الذي تم تنزيله".

    تم حفظ لقطة شاشة للعقدة في مجلد &quot;المحتوى الذي تم تنزيله&quot;.

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

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

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

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

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

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

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

فرض الحالة

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

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

    • رواية "سيد الذباب"
    • الجريمة والعقاب
    • Moby Dick

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

  3. انقر بزر الماوس الأيمن على <li class="demo--hover">The Lord of the Flies</li> واختَر Force State > :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 أدناه واختَر فحص.

    • 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 لتقييم التعبير.

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

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

تتيح لك أدوات المطوّر إيقاف JavaScript للصفحة مؤقتًا عندما يعدّل JavaScript عنصر DOM. اطّلِع على نقاط التوقف لتغيير 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> محدّدة في شجرة DOM. إذا لم يظهر، ارجع إلى الخطوة الانتقال إلى القسم المعروض وابدأ من جديد.

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

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

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

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

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