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

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

عرض عُقد DOM

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

فحص عقدة

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

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

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

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

    تمييز عقدة Michelangelo

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

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

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

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

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

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

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

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

    • George
    • رينغو
    • Paul

    • John

      فحص عقدة Ringo

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

    فحص عقدة ul

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

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

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

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

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

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

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

    • Magritte
    • سوتين

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تعديل DOM

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

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

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

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

    • قلي
    • ليلى

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

    تعديل النص

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

تعديل السمات

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

  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. انقر بزر الماوس الأيمن على Leonard أدناه واختَر فحص.

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

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

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

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

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

  4. اختَر العنصر li من قائمة الإكمال التلقائي واكتب >. تضيف "أدوات مطوري البرامج في Chrome" تلقائيًا علامة الإغلاق </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).

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

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

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

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

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

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

مزيد من المعلومات حول 4 طرق لأخذ لقطات شاشة باستخدام "أدوات مطوّري البرامج"

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

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

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

    • ستيفي وندر
    • Tom Waits
    • Chris Thile
    • Elvis Presley

  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. انقر بزرّ الماوس الأيمن على عنصر القائمة أمير الذباب، ثمّ اختَر فحص.

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

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

إخفاء عقدة

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

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

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

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

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

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

حذف عقدة

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

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

    • The Illustrated Man
    • عبر المرآة
    • مؤسسة

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

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

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

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

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

عند فحص عقدة (بما في ذلك العناصر الزائفة مثل ::before أو ::after)، يعني النص == $0 بجانب العقدة أنّه يمكنك الرجوع إلى هذه العقدة في &quot;وحدة التحكّم&quot; باستخدام المتغيّر $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 دولار أمريكي في &quot;وحدة التحكّم&quot;

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

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

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

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

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

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

    • السبات الكبير
    • The Long Goodbye

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

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

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

نسخ مسار JS

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

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

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

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

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

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

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

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

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

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

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

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

يمكنك المشاركة في منتدى &quot;أدوات مطوّري البرامج&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‏ (MDN).

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

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

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

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

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

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

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