دليل المستخدم إلغاء

لوحة DOM

بحث

تاريخ آخر تحديث 20‏/12‏/2021

تعرف على كيفية استخدام لوحة DOM لتحرير HTML عن طريق تعيين العناصر في طريقة العرض ‏Live أو المحددات التطبيقية في HTML Designer مع علامات HTML لديها.

تقدم لوحة DOM شجرة HTML تفاعلية للمحتويات الثابتة والديناميكية. يساعدك هذا العرض على تخطيط العناصر بشكل ظاهر في Live View باستخدام علامة HTML والمحددات المطبقة الخاصة بها في CSS Designer. يمكنك أيضًا إجراء عمليات تحرير لبنية HTML في لوحة DOM والاطلاع على التغييرات السارية على الفور في Live View.

لفتح لوحة DOM، حدد Window > DOM. يمكنك أيضًا استخدام مفاتيح لوحة المفاتيح - Ctrl + / (Win); Cmd + / (Mac) - لفتح لوحة DOM.

عند سحب عناصر لإدراجها مباشرة في Live View، تظهر أيقونة </> قبل أن تسقط العنصر. يمكنك النقر فوق هذه الأيقونة لفتح لوحة DOM وإدراج العنصر في الموضع المناسب في بنية المستند. لمزيد من المعلومات، راجع إدراج عناصر مباشرةً في طريقة العرض Live.

تعرض لوحة DOM فقط العناصر الثابتة في طريقة العرض Design أو Code وكلاً من العناصر الثابتة والديناميكية في Live View.

في مستندات شبكة مرنة، تتيح لك لوحة DOM فقط عرض بنية HTML DOM ولا يسمح لك بتحرير بنية HTML.

ملاحظة:

يمكنك المحتوى الثابت فقط في لوحة DOM. تظهر عناصر القراءة فقط أو الديناميكية بظل أغمق رمادي.

يمكنك التحرك حول لوحة DOM ووضعها في أي مكان مناسب على واجهة المستخدم. يمكنك أيضًا إرساء اللوحة بجانب اللوحات الأخرى.

كيفية استخدام لوحة DOM

افتح المستند المطلوب، ثم قم بفتح لوحة DOM عن طريق تحديد Window > DOM.
قم بالتبديل إلى Live View وانقر فوق العنصر الذي تريد فحصه أو تحريره.
- يتم تمييز علامة HTML الخاصة بالعنصر المحدد في لوحة DOM.
- يتم تمييز المحدد المطبق في CSS Designer.
- يتم تمييز الأيقونة ذي الصلة في طريقة العرض Code.
- يتم تمييز العلامة ذات الصلة (باللون الأزرق) في Tag Selector.
بدلاً من ذلك، يمكنك تحديد عنصر HTML في لوحة DOM. عند النقر فوق أي عنصر في لوحة DOM:
- يتم تمرير Live View إلى العنصر المطابق.
- عند فتح Code View ، يقوم Code View بالتمرير إلى الرمز المطابق للعنصر.
- CSS Designer ‏( جزء Selectors) يقوم بالتمرير إلى أقرب محدد مطابق (يشبه ذلك النقر فوق العنصر في Live View).
- يتم تمييز العلامة في Tag Selector.
يتيح لك هذا التزامن بين طرق العرض المختلفة وCSS Designer إظهار علامة HTML وأنماط ترتبط بالعنصر المحدد في لحظة واحدة.
متابعة تحرير العنصر حسب الحاجة (تحرير HTML أو CSS). للحصول على معلومات حول استخدام لوحة DOM لتحرير علامة HTML، راجع تحرير بنية HTML باستخدام لوحة DOM. للحصول على معلومات حول CSS Designer، راجع تخطيط الصفحات باستخدام CSS Designer.

تحرير بنية HTML باستخدام لوحة DOM

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

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

التكرار - Ctrl + D (Win)/ Cmd + D (Mac)
الحذف - Del أو Backspace
النسخ - Ctrl + C (Win)/Cmd + C (Mac)
اللصق - Ctrl + V (Win)/Cmd + V (Mac)
التراجع - Ctrl + Z (Win)/Cmd + Z (Mac)
الإعادة - Ctrl + Y (Win)/Cmd + Y (Mac)

لتحديد عنصر أو عقدة، انقر فوق العنصر أو العقدة. لتمديد أو طي عنصر أو عقدة، انقر فوق علامة HTML أو انقر نقرًا مزدوجًا فوق المحدِد المجاور للعلامة.
لتكرار عنصر أو عقدة، انقر بزر الماوس الأيمن فوق العنصر أو العقدة، ثم انقر فوق Duplicate. عند تكرار عنصر بمعرف مقترن به، يتزايد المعرف للعنصر الجديد (المكرر).
لنسخ عنصر أو عقدة، انقر بزر الماوس الأيمن فوق العنصر أو العقدة، ثم انقر فوق Copy. عند نسخ عنصر مع عناصر تابعة، يتم نسخ العنصر التابع أيضًا.
للصق عنصر أو عقدة، انقر فوق العنصر أو العقدة التي من خلالها تريد إدخال العناصر المنسوخة. ثم انقر بزر الماوس الأيمن فوق العنصر أو العقدة وانقر فوق لصق.
للصق العنصر المنسوخ كتابع للعنصر المحدد أو العقدة، انقر بزر الماوس الأيمن فوق العنصر أو العقدة (الأصل)، ثم انقر فوق Paste As Child.
لنقل العناصر أو إعادة ترتيبها، اسحب العنصر إلى الموقع المرغوب، ضمن لوحة DOM.

يظهر خط أخضر يشير إلى المكان الذي سيوضع فيه العنصر المسحوب. إذا قمت بإسقاط العنصر فوق العنصر المحدد باللون الرمادي (العنصر المرجعي)، فإن العنصر المُسقط يتم وضعه كأول عنصر فرعي من العنصر المرجعي.

لحذف عنصر أو عقدة، انقر بزر الماوس الأيمن على العنصر أو العقدة، وانقر فوق Delete.

يمكنك التراجع (Ctrl/Cmd + Z) عن العمليات التي يتم إجراؤها في لوحة DOM أو إعادتها (Ctrl/Cmd + Y).

لإجراء عمليات التحرير المذكورة أعلاه على العديد من العناصر، حدد عناصر متعددة في لوحة DOM:

انقر مع الضغط على مفتاح Shift فوق العناصر المطلوبة للتحديد المتجاور
انقر مع الضغط على مفتاح Ctrl فوق العناصر المطلوبة للتحديد غير المتجاور

ملاحظة:

في العادة، عند تحرير صفحة، يتغير الزر Refresh الموجود في شريط الأدوات Document إلى الزر Stop ليشير إلى أن الصفحة قيد إعادة التحميل. بعد إعادة تحميل الصفحة، يظهر الزر Refresh مرة أخرى للإشارة إلى أن الصفحة تم تحميلها بالكامل.

هام: إذا كانت صفحتك تحتوي على JavaScript، فسيتم عرض القائمة التي تظهر عند النقر بزر الماوس الأيمن في لوحة DOM لبرهة، ثم تصبح غير متوفرة. لاستخدام القائمة التي تظهر عند النقر بزر الماوس الأيمن، قم بإخفاء شاشات Live View ‏(Live View options > Hide Live View Displays)، ثم قم بتعطيل JavaScript ‎(Live View options > Disable JavaScript)‎.

تحرير العلامات والفئات والمعرفات ولوحة DOM

يُمكنك تحرير العلامات والفئات والمعرفات عن طريق النقر المزدوج فوقها في لوحة DOM. كما يُمكنك إضافة فئات أو معرفات إضافية عن طريق فصلها بمسافة. بالنسبة للعلامات غير المرتبطة بفئة ما أو معرف، يُمكنك كتابة اسم الفئة أو المعرف بعد النقر المزدوج فوق العلامة.

تظهر تلميحات التعليمة البرمجية بمجرد بدء كتابة اسم العلامة أو الفئة أو المعرف. لتضييق نطاق التلميحات إلى الفئات، ابدأ الكتابة بنقطة. لرؤية المعرفات فقط في التلميحات، ابدأ الكتابة بعلامة تجزئة (#).

إدراج العناصر في لوحة DOM

يُمكنك الآن إدراج عناصر جديدة في صفحة الويب باستخدام لوحة DOM بإحدى الطرق التالية:

اضغط على مفتاح المسافة أو انقر فوق أيقونة الإدراج المجاورة للعنصر المطلوب في لوحة DOM. في النافذة المنبثقة التي تظهر، انقر فوق أحد الخيارات التالية. لالتفاف العديد من العناصر باستخدام علامة، حدد العناصر المطلوبة ثم اختر علامة الالتفاف من خيارات الإدراج.

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

عند قيامك بإدراج العلامات باستخدام لوحة DOM، يتم أيضا إدراج النص الافتراضي (العنصر النائب) والسمات المطلوبة للعلامات:

عند إدراج أي من العلامات التالية وتطبيق التغييرات، يتم إدراج النص الافتراضي في طريقة عرض Code وLive وDesign:
div، وheader، وnav، وaside، وarticle، وsection، وfooter، وh1-h6، وhgroup
عندما تقوم بإدراج علامة جدول وتنفيذ هذه التغييرات، يتم إدراج جدول 3X3.
عند إدراج علامة embed أو img وتنفيذ التغييرات، يظهر حوار Select File ويطالبك باختيار الملف المناسب.
عند إدراج علامة تعريف وتطبيق التغييرات، تتم إضافة التعليمة البرمجية في عرض Code: <meta name="" content="">
عند إدراج علامة figure وتنفيذ التغييرات، يتم إدراج علامة figure مع figcaption متداخلة.
وعند إدراج علامة ul أو علامة ol وتنفيذ التغييرات، يتم إدراج علامة ol/ul مع علامة li المتداخلة.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟