فهم طراز كائن المستند (DOM) في التفاصيل

لقد سمعنا جميعا من DOM, أو طراز كائن المستند, التي يتم ذكرها من وقت لآخر ، تتعلق بـ JavaScript. DOM هو مفهوم مهم جدا في تطوير الشبكة. بدونها ، لن نكون قادرين على تعديل صفحات HTML ديناميكيًا في المتصفح.

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

أشجار بنية البيانات

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

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

بالطبع ، هذا ليس كل ما في بنية البيانات ، ولكن هذا إلى حد كبير حيث يبدأ كل شيء. هذه “ترتيب” هو في قلب كل شيء. من المهم جدا في DOM كذلك. لكننا لا نتحدث عن DOM حتى الآن ، لذلك اسمحوا لي أن توجيهك نحو بنية البيانات التي قد تكون على دراية بها: المصفوفات.

المصفوفات والأشجار

صفائف لها المؤشرات و الطول, يستطيعون متعدد الأبعاد, ولها العديد من الخصائص. على نفس القدر من الأهمية معرفة هذه الأشياء عن المصفوفات ، دعونا لا نزعج أنفسنا بهذا الآن. بالنسبة لنا ، مجموعة بسيطة جدا. إنه عندما أنت ترتيب أشياء مختلفة في خط.

وبالمثل ، عندما نفكر في الأشجار ، دعنا نقول ، إنه يتعلق وضع الأشياء تحت بعضها البعض, بدءا بشيء واحد فقط في الأعلى.

الآن ، قد تأخذ البط خط واحد من قبل, اقلبها, وقل لي ذلك “الآن ، كل بطة تحت بطة أخرى”. هل هي شجرة بعد ذلك؟ أنه.

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

وفي كلتا الحالتين ، فإن العنصر الأعلى في بنية بيانات الشجرة يفعل شيئًا مهمًا للغاية. ويوفر مكانا ل ابدأ في البحث عن أي معلومات نريد استخراجها من الشجرة.

معنى DOM

DOM لتقف على طراز كائن المستند. المستند يشير إلى مستند HTML (XML) الذي ممثلة ككائن. (في JavaScript ، لا يمكن أبدًا تمثيل كل شيء ككائن!)

النموذج هو التي أنشأتها المتصفح يأخذ مستند HTML ويقوم بإنشاء كائن يمثله. يمكننا الوصول إلى هذا الكائن باستخدام JavaScript. وبما أننا نستخدم هذا الكائن لمعالجة مستند HTML وإنشاء تطبيقاتنا الخاصة, دوم هو في الأساس API.

شجرة دوم

في كود JavaScript ، وثيقة HTML هي ممثلة ككائن. جميع البيانات المقروءة من تلك الوثيقة هي حفظ أيضا ككائنات, متداخلة تحت بعضها البعض (لأنه كما قلت من قبل ، في JavaScript لا يمكن أبدًا تمثيل كل شيء ككائنات فقط).

لذلك ، هذا هو الترتيب الفعلي لبيانات DOM في التعليمات البرمجية: كل شيء موجود رتبت ككائنات. منطقيا ، ولكن, إنها شجرة.

محلل DOM

كل برنامج متصفح لديه برنامج يسمى محلل دوم هذا هو المسؤول عن تحليل مستند HTML في DOM.

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

تحليل البيانات من HTML إلى شجرة DOM

خذ ملف HTML بسيط. لديها عنصر الجذر . انها عناصر فرعية هي و , كل لديه العديد من العناصر التابعة الخاصة بهم.

لذلك أساسا ، المتصفح يقرأ البيانات في وثيقة HTML, شيء مشابه لهذا:

و, يرتب لهم في شجرة DOM مثله:

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

ال واجهة DOM في جافا سكريبت يسمى وثيقة (لأنه تمثيل مستند HTML). وبالتالي ، نحن نصل إلى شجرة DOM لمستند HTML عبر ال وثيقة جهة تعامل في جافا سكريبت.

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

كيف تم تصميم العقد

لقد ذكرت من قبل أن كل جزء من البيانات من وثيقة HTML هو تم الحفظ ككائن في JavaScript. لذلك ، كيف يمكن ترتيب البيانات المحفوظة ككائن منطقيا كشجرة?

العقد من شجرة DOM لها خصائص أو خصائص معينة. تقريبا كل عقدة في شجرة لديه عقدة الأم (العقدة الموجودة فوقها مباشرة), العقد الطفل (العقد تحته) و القممشترك في نفس (العقد الأخرى التي تنتمي إلى نفس الوالد). وجود هذا عائلة أعلاه ، أدناه ، وحول العقدة هو ما يؤهلها ك جزء من شجرة.

هذه المعلومات العائلية من كل عقدة حفظ كخصائص في الكائن الذي يمثل تلك العقدة. فمثلا, الأطفال هي خاصية لعقدة تحمل قائمة بالعناصر التابعة لتلك العقدة ، وبالتالي ترتيبها المنطقي لعناصرها الفرعية تحت العقدة.

تجنب المبالغة في التلاعب DOM

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

قل ، تريد تحديث لون

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

ولكن ، ماذا لو كنت تريد إزالة العقدة من شجرة أو أضف واحدة إليه? الشجرة كلها قد يتعين إعادة ترتيبها, مع العقدة إزالتها أو إضافتها إلى الشجرة. هذه هي وظيفة مكلفة. يستغرق وقتًا وموردًا للمتصفح لإنجاز هذه المهمة.

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

يمكننا تجنب هذا باستخدام DocumentFragment جهة تعامل. فكر في الأمر كصندوق يمكنه ذلك عقد جميع الصفوف الخمسة وتضاف إلى الشجرة. بهذه الطريقة الصفوف الخمسة وأضاف كقطعة واحدة من البيانات وليس واحدًا تلو الآخر ، مما يؤدي إلى تحديث واحد فقط في الشجرة.

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

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

تغليف

التفاف الأشياء ، DOM هو تصور كشجرة تتكون من جميع العناصر الموجودة في مستند HTML. جسديا (مثل المادية مثل أي شيء رقمي يمكن الحصول عليها) ، انها مجموعة من كائنات JavaScript المتداخلة من الخصائص والأساليب التي تحتوي على المعلومات التي تجعل من الممكن ترتيب منطقي لهم في شجرة.