كما هو الحال في ملفات HTML الخارجية، فإن تنظيم العلامات منفصل عن أسلوبه وتنسيقه وسلوكه. على الرغم من أنه يمكنك بالتأكيد تغيير نمط العناصر أو النص باستخدام JavaScript، إلا أنه من المثير للاهتمام تغيير تنظيم كيفية وضع العلامات الخاصة بك.
فقط تذكر أن الترميز الخاص بك لا يوفر سوى التنظيم وإطار العمل، وستكون في طريقك إلى النجاح. قم بخطوة صغيرة إلى الأمام وسترى كيف يأخذ المتصفح كل هذا التنظيم النصي ويحوله إلى شيء مثير للاهتمام للغاية، مجموعة من الكائنات، كل منها يمكن تغييره، إضافته، أو إزالته.
مزايا ترميز النص
قبل مناقشة متصفحات الويب، من المفيد التفكير في السبب الذي يجعل النص العادي هو الخيار الأفضل على الإطلاق لتخزين HTML (راجع بعض الأفكار الأخرى حول الترميز لمزيد من المعلومات). بغض النظر عن الإيجابيات والسلبيات، تذكر فقط أنه يتم إرسال HTML عبر الشبكة إلى متصفح الويب في كل مرة يتم فيها عرض الصفحة (للإيجاز، لا يتم أخذ ذاكرات التخزين المؤقت وما إلى ذلك في الاعتبار). لا توجد حقًا طريقة أكثر فعالية لتوصيل النص. الكائنات الثنائية، والتمثيلات الرسومية للصفحات، وكتل العلامات المعاد تنظيمها، وما إلى ذلك، كلها أكثر صعوبة في المرور عبر الشبكة من الملفات النصية العادية.
وبالإضافة إلى ذلك، يضيف المتصفح أيضًا إلى المجد. تتيح متصفحات اليوم للمستخدمين تغيير حجم النص، وقياس الصور، وتنزيل ملف CSS أو JavaScript الخاص بالصفحة (في معظم الحالات)، وغير ذلك الكثير، مما يمنع تمامًا إرسال أي نوع من التمثيل الرسومي للصفحة إلى المتصفح. ومع ذلك، يحتاج المتصفح إلى HTML الخام حتى يتمكن من تطبيق أي معالجة على الصفحة في المتصفح، بدلاً من الثقة في المتصفح للتعامل مع هذه المهمة. وبالمثل، فإن فصل CSS عن JavaScript وCSS عن ترميز HTML يتطلب تنسيقًا يمكن فصله بسهولة. مرة أخرى، الملفات النصية هي أفضل طريقة لهذه المهمة.
أخيرًا وليس آخرًا، تذكر أن المعايير الجديدة (مثل HTML 4.01 وXHTML 1.0 و1.1) تعد بفصل المحتوى (البيانات الموجودة في الصفحة) عن العرض والأسلوب (الذي يتم تطبيقه عادةً بواسطة CSS). إذا قام المبرمجون بفصل HTML عن CSS ثم أجبروا المتصفح على استرداد بعض التمثيل للصفحة التي تلصق الأجزاء المختلفة من الصفحة معًا، فسيفقدون معظم فوائد هذه المعايير. إن إبقاء هذه الأجزاء منفصلة عند وصولها إلى المتصفح يمنح المتصفح مرونة غير مسبوقة في الحصول على HTML من الخادم.
أفكار إضافية حول ترميز
تحرير النص العادي: صحيح أم خطأ؟
يعد النص العادي مثاليًا لتخزين العلامات، ولكنه غير مناسب لتحرير العلامات. من الشائع استخدام IDEs، مثل Macromedia DreamWeaver أو Microsoft® FrontPage® الأكثر قوة، لمعالجة ترميز صفحة الويب. غالبًا ما توفر هذه البيئات اختصارات وتساعد في إنشاء صفحات ويب، خاصة عند استخدام CSS وJavaScript، وكلاهما يأتي من ملفات أخرى غير ترميز الصفحة الفعلي. لا يهم أن العديد من الأشخاص ما زالوا يفضلون برنامج Notepad أو vi القديم الجيد (أعترف أنني واحد منهم). وفي كلتا الحالتين، النتيجة النهائية هي ملف نصي مليء بالعلامات.
النص على الويب:
لقد قيل من الجيد أن النص هو أفضل وسيلة للمستندات، مثل HTML أو CSS، والتي يتم نقلها آلاف المرات عبر الويب. عندما أقول أنه من الصعب على المتصفح تمثيل النص، فأنا أشير على وجه التحديد إلى تحويل النص إلى صفحة رسومية مرئية ليشاهدها المستخدم. وهذا لا علاقة له بكيفية استرداد المتصفح للصفحة من متصفح الويب؛ وفي هذه الحالة، يظل النص هو الخيار الأفضل.
مساوئ ترميز النص
مثلما يتمتع ترميز النص بمزايا مدهشة للمصممين ومنشئي الصفحات، فإن له أيضًا عيوبًا مفاجئة للمتصفحات. على وجه التحديد، يصعب على المتصفحات تمثيل ترميز النص بشكل مرئي للمستخدم مباشرةً (راجع بعض الأفكار الأخرى حول الترميز لمزيد من التفاصيل). ضع في اعتبارك مهام المتصفح الشائعة التالية:
· تطبيق أنماط CSS (عادةً من أوراق أنماط متعددة في ملفات خارجية) للترميز استنادًا إلى نوع العنصر والفئة والمعرف وموضعه في مستند HTML.
· تطبيق الأنماط والتنسيقات على أجزاء مختلفة من مستند HTML استنادًا إلى كود JavaScript (الموجود عادةً في ملف خارجي).
· تغيير قيم حقول النموذج بناءً على كود JavaScript.
· استنادًا إلى كود JavaScript، يدعم التأثيرات المرئية مثل تقليب الصور وتبديلها.
لا يكمن التعقيد في برمجة هذه المهام؛ فكل شيء فيها سهل إلى حد ما. يأتي التعقيد من قيام المتصفح بالفعل بتنفيذ الإجراء المطلوب. إذا تم تخزين العلامة كنص، على سبيل المثال، إذا كنت تريد إدخال نص (محاذاة النص: مركز) في العنصر p لفئة النص المركزي، فكيف يمكن تحقيق ذلك؟
· إضافة أنماط مضمنة إلى النص؟
· تطبيق الأنماط على نص HTML في المتصفح والاحتفاظ بالمحتوى في المنتصف أم لا؟
· تطبيق HTML غير مرتب ثم تطبيق التنسيق بعد ذلك؟
هذه المشاكل الصعبة للغاية هي السبب وراء قيام عدد قليل جدًا من الأشخاص بكتابة المتصفحات اليوم. (يجب على من كتب المتصفح أن يقبل خالص شكري.)
ليس هناك شك في أن النص العادي ليس طريقة جيدة لتخزين HTML للمتصفح، على الرغم من أن النص هو الحل الأفضل للحصول على ترميز الصفحة. أضف إلى ذلك قدرة JavaScript على تغيير بنية الصفحة، وستصبح الأمور أكثر دقة. هل يجب على المتصفح إعادة كتابة البنية المعدلة على القرص؟ كيف يمكنك الاحتفاظ بأحدث نسخة من المستند؟
من المؤكد أن النص ليس هو الحل. من الصعب تعديلها، ومن الصعب تطبيق الأنماط والسلوكيات عليها، كما أنها بعيدة كل البعد عن الطبيعة الديناميكية لصفحات الويب اليوم.
إن الإجابة على مشكلةاللجوء إلى طرق العرض الشجرية
(على الأقل الإجابة التي تختارها متصفحات الويب اليوم) هي استخدام بنية شجرية لتمثيل HTML. راجع القائمة 1، وهي صفحة HTML بسيطة ومملة إلى حد ما تمثل ترميز هذه المقالة.
القائمة 1. صفحة HTML بسيطة<html>
في ترميز النص
<الرأس>
<title>الأشجار، الأشجار، في كل مكان</title>
</الرأس>
<الجسم>
<h1>الأشجار، الأشجار، في كل مكان</h1>
<p>مرحبًا بك في هذه الصفحة <em>المملة حقًا</em>.</p>
<ديف>
تعال مرة أخرى قريبا.
<img src="come-again.gif" />
</div>
</الجسم>
</html>
يقبل المتصفح الصفحة ويحولها إلى بنية شجرة، كما هو موضح في الشكل 1.
للحفاظ على حركة هذه المقالة، قمت بتبسيطها قليلاً. سيكون الخبراء في DOM أو XML على دراية بتأثير المسافة البيضاء على طريقة تمثيل نص المستند وتقسيمه في البنية الشجرية لمتصفح الويب. الفهم السطحي يجعل الأمور غامضة، لذلك إذا كنت تريد معرفة تأثير المساحة البيضاء، فهذا هو أفضل رهان لك، وإذا لم يكن الأمر كذلك، فما عليك سوى مواصلة القراءة ولا تفكر في الأمر. عندما تصبح مشكلة، عندها ستعرف كل ما تحتاجه.
بصرف النظر عن خلفية الشجرة الفعلية، فإن أول شيء قد تلاحظه هو أن كل شيء في الشجرة يبدأ بالعنصر الخارجي الذي يحتوي على HTML، وهو عنصر html. وباستخدام استعارة الشجرة، يُسمى هذا بالعنصر الجذري. وعلى الرغم من أن هذا هو المستوى السفلي من الشجرة، فعندما تنظر إلى الشجرة وتحللها، عادةً ما أبدأ بهذا. إذا نجح الأمر، فيمكنك قلب الشجرة بأكملها رأسًا على عقب، لكن هذا يؤدي إلى تمديد استعارة الشجرة قليلاً.
تمثل الخطوط المتدفقة من الجذر العلاقة بين الأجزاء المسمى المختلفة. عنصرا الرأس والجسم هما عنصران فرعيان لعنصر جذر html؛ والعنوان هو ابن للرأس، والنص "الأشجار والأشجار في كل مكان" هو ابن للعنوان. يتم تنظيم الشجرة بأكملها بهذه الطريقة حتى يحصل المتصفح على بنية مشابهة للشكل 1.
بعض المصطلحات الإضافية
للحفاظ على استعارة الشجرة، يُطلق على الرأس والجسم اسم فروع html. يطلق عليهم فروع لأن لديهم أطفالًا. عندما تصل إلى نهاية الشجرة، ستصل إلى النص الرئيسي، مثل "الأشجار، الأشجار، في كل مكان" و"حقًا"؛ غالبًا ما تسمى هذه الأوراق لأنها ليس لديها أطفال. لا تحتاج إلى تذكر كل هذه المصطلحات، فمن الأسهل أن تتخيل بنية الشجرة عندما تحاول معرفة ما يعنيه مصطلح معين.
قيم الكائن
الآن بعد أن فهمت بعض المصطلحات الأساسية، حان الوقت للتركيز على المستطيل الصغير الذي يحتوي على اسم العنصر والنص (الشكل 1). كل مستطيل عبارة عن كائن؛ ويقوم المتصفح بحل بعض مشكلات النص بداخله. باستخدام الكائنات لتمثيل كل جزء من مستند HTML، يمكنك بسهولة تغيير التنظيم وتطبيق الأنماط والسماح لـ JavaScript بالوصول إلى المستند والمزيد.
أنواع الكائنات
وعلامات الخصائص كل نوع محتمل له نوع كائن خاص به. على سبيل المثال، يتم تمثيل العناصر في HTML بنوع كائن العنصر. يتم تمثيل النص الموجود في المستند بواسطة نوع النص، ويتم تمثيل السمات بواسطة نوع السمة، وهكذا.
لذا، لا تستطيع متصفحات الويب فقط استخدام نموذج كائن لتمثيل المستندات (وبالتالي تجنب الاضطرار إلى التعامل مع نص ثابت)، ولكن يمكنهم أيضًا استخدام أنواع الكائنات لمعرفة ماهية الشيء على الفور. يتم تحليل مستند HTML وتحويله إلى مجموعة من الكائنات، كما هو موضح في الشكل 1، ولم تعد أشياء مثل الأقواس الزاوية وتسلسلات الهروب (على سبيل المثال، استخدم < لـ < و > لـ >) تمثل مشكلة. وهذا يجعل مهمة المتصفح (على الأقل بعد تحليل إدخال HTML) أسهل بكثير. من السهل معرفة ما إذا كان الشيء عنصرًا أم سمة وتحديد كيفية التعامل مع الكائنات من هذا النوع.
باستخدام الكائنات، يمكن لمستعرض الويب تغيير خصائص هذه الكائنات. على سبيل المثال، يحتوي كل كائن عنصر على عنصر أصل وقائمة من العناصر الفرعية. لذا فإن إضافة عنصر فرعي جديد أو نص يؤدي ببساطة إلى إضافة عنصر فرعي جديد إلى قائمة العناصر الفرعية الخاصة بالعنصر. تحتوي هذه الكائنات أيضًا على خاصية النمط، لذا فإن تغيير نمط عنصر أو مقطع نص بسرعة أمر بسيط للغاية. على سبيل المثال، لاستخدام JavaScript لتغيير ارتفاع div، تبدو كما يلي:
someDiv.style.height = "300px";
بمعنى آخر، يجعل متصفح الويب من السهل جدًا تغيير مظهر الشجرة وبنيتها باستخدام الكائن ملكيات. قارن هذا بالأشياء المعقدة التي يتعين على المتصفح القيام بها داخليًا لتمثيل الصفحة كنص، فكل تغيير في خاصية أو بنية يتطلب من المتصفح إعادة كتابة الملف الثابت وإعادة تحليله وإعادة عرضه على الشاشة. مع الأشياء، يتم حل كل هذا.
الآن، توقف للحظة لتوسيع بعض مستندات HTML وحددها بشجرة. على الرغم من أن هذا قد يبدو وكأنه طلب غير عادي (خاصة في مقال مثل هذا الذي يحتوي على القليل جدًا من التعليمات البرمجية)، إذا كنت تأمل أن تكون قادرًا على التعامل مع هذه الأشجار، فيجب أن تكون على دراية ببنيتها.
على طول الطريق، قد تكتشف بعض الأشياء الغريبة. على سبيل المثال، خذ بعين الاعتبار ما يلي:
ماذا يحدث للسمة؟
· ماذا عن النص المقسم إلى عناصر (مثل em وb)؟
· ماذا عن HTML الذي لم يتم تنظيمه بشكل صحيح (على سبيل المثال، عندما تكون علامة الإغلاق p مفقودة)؟
بمجرد أن تتعرف على هذه المشكلات، ستتمكن من فهم الأقسام التالية بشكل أفضل.
الصرامة هي في بعض الأحيان أمر جيد
إذا حاولت ممارسة التمرين الذي ذكرته للتو، فقد تجد بعض المشكلات المحتملة في عرض الشجرة المحدد (إذا لم يكن الأمر كذلك، فقط خذ كلامي على محمل الجد!). في الواقع، سيتم العثور على بعض المشاكل في القائمة 1 والشكل 1. أولاً، انظر إلى كيفية تحلل العنصر p. إذا سألت مطور الويب العادي "ما هو محتوى النص للعنصر p؟"، فإن الإجابة الأكثر شيوعًا ستكون "مرحبًا بك في صفحة ويب مملة حقًا". إذا قارنت هذا مع الشكل 1، سترى أن هذه الإجابة (على الرغم من أنها منطقية) هي ببساطة غير صحيحة.
في الواقع، يحتوي العنصر p على ثلاثة كائنات فرعية مختلفة، ولا يحتوي أي منها على النص الكامل "مرحبًا بك في صفحة ويب مملة حقًا". ستجد أجزاء من النص مثل "مرحبًا بك في صفحة ويب مملة"، ولكن ليس كلها. لفهم ذلك، تذكر أنه يجب تحويل أي شيء في الترميز إلى كائن من نوع ما.
كما أن الترتيب لا يهم! هل يمكنك أن تتخيل كيف سيستجيب المستخدم لمتصفح الويب إذا عرض المتصفح الكائنات الصحيحة، ولكن بترتيب مختلف عن الترتيب الذي قدمته لها في HTML؟ ماذا لو كانت الفقرة محصورة بين عنوان الصفحة وعنوان المقالة، وهذه ليست الطريقة التي تنظم بها مستندك بنفسك؟ من الواضح أن المتصفح يجب أن يحافظ على ترتيب العناصر والنص.
في هذا المثال، يحتوي العنصر p على ثلاثة أجزاء مختلفة:
· النص قبل العنصر em · العنصر em نفسه · النص بعد العنصر em
إذا أخطأت في هذا الترتيب، فقد تركز على الجزء الخطأ من النص. للحفاظ على كل شيء مرتبًا، يحتوي العنصر p على ثلاثة كائنات فرعية، بالترتيب الموضح في HTML الخاص بالقائمة 1. علاوة على ذلك، فإن النص الرئيسي "حقًا" ليس عنصرًا فرعيًا لـ p، بل هو عنصر فرعي لـ em، وعنصر فرعي لـ p.
من المهم جدًا فهم هذا المفهوم. على الرغم من أن النص "الحقيقي" من المحتمل أن يظهر مع نص عنصر p آخر، إلا أنه لا يزال تابعًا مباشرًا للعنصر em. يمكن أن يكون له تنسيق مختلف عن أي نص آخر، ويمكن نقله بشكل مستقل عن النص الآخر.
لوضع ذلك في الاعتبار، حاول رسم تخطيطي لـ HTML في القائمتين 2 و3 للتأكد من أن النص يحتوي على العنصر الأصلي الصحيح (بغض النظر عن كيفية ظهور النص في النهاية على الشاشة).
القائمة 2. ترميز
<html>
مع تداخل العناصر الذكي
<الرأس>
<title>هذا الأمر صعب بعض الشيء</title>
</الرأس>
<الجسم>
<h1>انتبه <u>بشكل وثيق</u>، حسنًا؟</h1>
<ديف>
<p>إن هذا ليس <em>ضروريًا</em> حقًا، ولكنه يجعل
<span id="bold-text">الهيكل <i>و</i> المؤسسة</span>
من الصفحة أسهل لمواكبة.</p>
</div>
</الجسم>
</html>
القائمة 3. تداخل العناصر الأكثر ذكاءً
<html>
<الرأس>
<title>التداخل أكثر تعقيدًا</title>
</الرأس>
<الجسم>
<div معرف = "الجسم الرئيسي">
<div معرف = "المحتويات">
<الجدول>
<tr><th>الخطوات</th><th>العملية</th></tr>
<tr><td>1</td><td>اكتشف <em>العنصر الجذر</em>.</td></tr>
<tr><td>2</td><td>تعامل مع <span id="code">الرأس</span> أولاً،
حيث أنه عادة ما يكون سهلاً.</td></tr>
<tr><td>3</td><td>العمل من خلال <span id="code">النص</span>.
فقط <em>خذ وقتك</em>.</td></tr>
</الجدول>
</div>
<div معرف = "إغلاق">
هذا الرابط <em>ليس</em> نشطًا، ولكن إذا كان نشطًا، فستكون هناك إجابات
إلى <a href="answers.html"><img src="exercise.gif" /></a> سيكون
كن متواجدًا ولكن <em>قم بالتمرين على أي حال!</em>
</div>
</div>
</الجسم>
</html>
ستجد إجابات هذه التمارين في ملفات GIF في نهاية هذه المقالة، Tricky-solution.gif في الشكل 2 و Trickier-solution.gif في الشكل 3. لا تلقي نظرة خاطفة، خذ الوقت الكافي للإجابة عليه تلقائيًا أولاً. سيساعدك هذا على فهم مدى صرامة القواعد المطبقة عند تنظيم الشجرة، وسيساعدك حقًا في إتقان HTML وبنيتها الشجرية.
ماذا عن الصفات؟
هل تواجه بعض المشاكل عند محاولتك معرفة ما يجب فعله بالعقارات؟ كما ذكرنا من قبل، فإن السمة لها نوع كائن خاص بها، ولكن السمة في الواقع ليست تابعة للعنصر الذي يعرضها. العنصر المتداخل والنص ليسا على نفس "مستوى" السمة، كما ستلاحظ، إجابات التمارين في القائمتين 2 و3 لم يتم عرض أي خصائص.
يتم تخزين الخصائص بالفعل في نموذج الكائن الذي تستخدمه المتصفحات، ولكن لها بعض الحالات الخاصة. يحتوي كل عنصر على قائمة بالخصائص المتاحة، منفصلة عن قائمة الكائنات الفرعية. لذلك قد يحتوي عنصر div على قائمة تحتوي على السمة "id" وسمة أخرى "class".
تذكر أن سمات العنصر يجب أن يكون لها أسماء فريدة، أي أن العنصر لا يمكن أن يحتوي على سمتين "معرف" أو سمتين "فئة". وهذا يجعل من السهل الحفاظ على القائمة والوصول إليها. كما سترى في المقالة التالية، يمكنك ببساطة استدعاء طريقة مثل getAttribute("id") للحصول على قيمة السمة بالاسم. يمكن أيضًا استخدام استدعاءات الأساليب المشابهة لإضافة خصائص أو تعيين (إعادة تعيين) قيمة الخصائص الموجودة.
تجدر الإشارة إلى أن تفرد أسماء السمات يجعل هذه القائمة مختلفة عن قائمة الكائنات الفرعية. يمكن أن يحتوي العنصر p على عدة عناصر em، لذا يمكن أن تحتوي قائمة الكائنات الفرعية على عدة نسخ مكررة. على الرغم من أن القوائم الفرعية وقوائم الخصائص تعمل بشكل مشابه، إلا أنه من الممكن أن تحتوي إحداهما على نسخ مكررة (أبناء كائن) بينما لا يمكن أن تحتوي أخرى (خصائص كائن عنصر). وأخيرًا، العناصر فقط هي التي تمتلك سمات، لذا لا تحتوي الكائنات النصية على قائمة إضافية لتخزين السمات.
HTML فوضوي
قبل الانتقال إلى كيفية قيام المتصفحات بتحويل العلامات إلى تمثيل شجرة، هناك موضوع آخر يستحق الاستكشاف، وهو كيفية تعامل المتصفحات مع العلامات غير جيدة التنسيق. "حسن التشكيل" هو مصطلح يستخدم على نطاق واسع في لغة XML وله معنيان أساسيان:
· كل علامة افتتاحية لها علامة إغلاق مطابقة. لذا فإن كل <p> في المستند يطابق </p>، وكل <div> يطابق </div>، وهكذا.
تتطابق علامة البداية الأعمق مع علامة النهاية الأعمق، ثم تتطابق علامة البداية الأعمق التالية مع علامة النهاية الأعمق التالية، وهكذا. لذا فإن <b><i>الخط العريض والمائل</b></i> غير قانوني لأن علامة الفتح الأعمق <i> لا تتطابق مع علامة الإغلاق الأعمق <b> بشكل صحيح. ولجعلها منسقة بشكل جيد، قم إما بتبديل ترتيب علامات الفتح أو ترتيب علامات الإغلاق. (إذا قمت بتبديل كليهما، فستظل المشكلة تحدث).
نلقي نظرة فاحصة على هاتين القاعدتين. لا تعمل هاتان القاعدتان على تبسيط تنظيم المستندات فحسب، بل تعملان أيضًا على إزالة عدم اليقين. هل يجب تطبيق الخط الغامق أولاً ثم المائل؟ أو العكس تماما؟ إذا كان هذا الترتيب وعدم اليقين لا يبدو أمرًا مهمًا، فضع في اعتبارك أن CSS يسمح للقواعد بتجاوز القواعد الأخرى، لذلك، على سبيل المثال، إذا كان النص الموجود في العنصر b له خط مختلف عن الخط الموجود في العنصر i، سوف يتغير الترتيب الذي يتم تطبيق التنسيق به. لذلك، يلعب التصميم الجيد لـ HTML دورًا حاسمًا.
إذا تلقى المتصفح مستندًا غير منسق بشكل جيد، فسوف يبذل قصارى جهده. ستكون بنية الشجرة الناتجة، في أحسن الأحوال، تقريبًا للصفحة الأصلية التي قصدها المؤلف، وفي أسوأ الأحوال، لا يمكن التعرف عليها. إذا سبق لك أن قمت بتحميل صفحة في متصفحك وشاهدت نتائج غير متوقعة تمامًا، فمن المحتمل أنك نظرت إلى نتائج المتصفح وخمنت كيف ينبغي أن تكون البنية الخاصة بك، وواصلت العمل بإحباط. بالطبع، إصلاح هذه المشكلة بسيط جدًا: تأكد من تنسيق المستند جيدًا! إذا لم تكن متأكدًا من كيفية كتابة HTML موحد، فارجع إلى المصادر الخاصة بك للحصول على المساعدة.
مقدمة إلى DOM
الآن، أنت تعلم أن المتصفحات تحول صفحات الويب إلى تمثيلات للكائنات، وربما خمنت أن تمثيلات الكائنات هي أشجار DOM. يرمز DOM إلى Document Object Model وهي مواصفات متاحة من اتحاد شبكة الويب العالمية (W3C) (يمكنك رؤية بعض الروابط ذات الصلة بـ DOM في الموارد).
ولكن الأهم من ذلك هو أن DOM يحدد أنواع الكائنات وخصائصها، مما يسمح للمتصفح بتمثيل العلامات. (سيتم تخصيص المقالة التالية في هذه السلسلة لمواصفات استخدام DOM في كود JavaScript وAjax.)
كائن المستند
أولاً، تحتاج إلى الوصول إلى نموذج الكائن نفسه. من السهل جدًا استخدام متغير المستند المدمج في أي كود JavaScript يتم تشغيله على صفحة ويب، ويمكنك كتابة كود مثل هذا:
var
domTree = document;
يقوم المتصفح بإنشاء كائنات مستندية يمكن استخدامها في تعليمات JavaScript البرمجية، ويتم عرض شجرة كاملة لترميز تمثيل الكائنات (الشكل 1).
كل عنصر عبارة عن عقدة
. من الواضح أن كائن المستند مهم، ولكن هذه مجرد البداية. قبل المضي قدمًا، هناك مصطلح آخر يجب تعلمه: العقد. أنت تعلم بالفعل أن كل جزء من الترميز يتم تمثيله بواسطة كائن، ولكنه ليس مجرد أي كائن، إنه نوع محدد من الكائنات، عقدة DOM. أنواع أكثر تحديدًا، مثل النص والعناصر والسمات، كلها ترث من نوع العقدة الأساسي هذا. لذلك يمكن أن تكون هناك عقد نصية وعقد عناصر وعقد سمات.
إذا كان لديك بالفعل الكثير من الخبرة في برمجة JavaScript، فمن المحتمل أنك تعمل بالفعل باستخدام كود DOM. إذا كنت تتابع سلسلة Ajax هذه حتى الآن، فمن المؤكد أنك كنت تستخدم كود DOM منذ فترة. على سبيل المثال، سطر التعليمات البرمجية var number = document.getElementById("phone").value; يستخدم DOM للعثور على عنصر محدد ثم يسترد قيمة هذا العنصر (في هذه الحالة، حقل نموذج). لذلك، حتى لو لم تكن تدرك ذلك، فأنت تستخدم DOM في كل مرة تكتب فيها مستندًا في كود JavaScript.
لتوضيح المصطلحات التي تعلمتها بالفعل، فإن شجرة DOM هي شجرة من الكائنات، ولكن بشكل أكثر تحديدًا، فهي شجرة من كائنات العقدة. في تطبيقات Ajax أو أي JavaScript آخر، يمكنك استخدام هذه العقد لإنتاج تأثيرات مثل إزالة العناصر ومحتوياتها، أو تمييز نص معين، أو إضافة عناصر صورة جديدة. ونظرًا لأن جميعها تحدث من جانب العميل (الكود الذي يتم تشغيله في متصفح الويب)، فإن هذه التأثيرات تحدث فورًا دون الاتصال بالخادم. والنتيجة النهائية هي في كثير من الأحيان أن التطبيق يشعر بمزيد من الاستجابة لأن المحتوى يتغير على صفحة الويب دون توقف مؤقت أثناء توجيه الطلب إلى الخادم وتفسير الاستجابة.
في معظم لغات البرمجة، تحتاج إلى معرفة اسم الكائن الفعلي لكل نوع عقدة، ومعرفة الخصائص المتاحة، ومعرفة الأنواع والقوالب، لكن هذا ليس ضروريًا في JavaScript. يمكنك فقط إنشاء متغير وتعيين الكائن الذي تريده (كما رأيت بالفعل):
var domTree = document;
var phoneNumberElement = document.getElementById("phone");
var phoneNumber = phoneNumberElement.value؛
لا يوجد نوع، تقوم JavaScript بإنشاء المتغير حسب الحاجة وتخصيص النوع الصحيح له. ونتيجة لذلك، يصبح العمل مع DOM من خلال JavaScript أمرًا تافهًا (سيتم تخصيص مقالة مستقبلية لـ DOM فيما يتعلق بـ XML، والتي ستكون أكثر إبداعًا).
فيالختام
، أريد أن أترككم مع قليل من التشويق هنا. من الواضح أن هذا ليس وصفًا شاملاً تمامًا لـ DOM، في الواقع، هذه المقالة مجرد مقدمة لـ DOM. هناك ما هو أكثر بكثير في DOM مما قدمته اليوم!
ستتوسع المقالة التالية في هذه السلسلة حول هذه الأفكار وتتعمق في كيفية استخدام DOM في JavaScript لتحديث صفحات الويب، وتغيير HTML بسرعة، وإنشاء تجربة أكثر تفاعلية لمستخدميك. سأعود إلى DOM مرة أخرى في مقال لاحق مخصص لاستخدام XML في طلبات Ajax. لذا كن على دراية بـ DOM، الذي يعد جزءًا رئيسيًا من تطبيقات Ajax.
في هذه المرحلة، سيكون فهم DOM بعمق أمرًا بسيطًا للغاية، مثل تفصيل كيفية التنقل في شجرة DOM، والحصول على قيم العناصر والنص، والتكرار عبر قوائم العقد، وما إلى ذلك، ولكن هذا قد يتركك مع الانطباع بأن DOM يدور حول الكود، وهذا ليس هو الحال.
قبل قراءة المقالة التالية، حاول التفكير في بنية شجرة وجربها باستخدام بعض HTML الخاصة بك لترى كيف يقوم متصفح الويب بتحويل HTML إلى عرض شجرة للترميز. بالإضافة إلى ذلك، فكر في تنظيم شجرة DOM وتدرب عليها مع الحالات الخاصة المقدمة في هذه المقالة: السمات، والنص الذي يحتوي على عناصر مختلطة، والعناصر التي لا تحتوي على محتوى نصي (مثل عنصر img).
إن الحصول على فهم قوي لهذه المفاهيم ومن ثم تعلم بناء جملة JavaScript وDOM (المقالة التالية) سيجعل الاستجابة أسهل بكثير.
ولا تنس أن هناك إجابات للقائمتين 2 و3، كاملة مع نموذج التعليمات البرمجية!