أمثلة دوم. مقدمة

يقدم هذا القسم مقدمة مختصرة عن نموذج كائن المستند (DOM) - ما هو DOM، وكيفية توفير هياكل مستند HTML وXML، وكيفية التفاعل معها. يحتوي هذا القسم على معلومات أساسية وأمثلة.

ما هو نموذج كائن المستند (DOM)؟

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

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

كيف يتم الوصول إلى DOM؟

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

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

في المثال التالي، يتم تعريف كود JavaScript داخل عنصر؛ ويقوم هذا الكود بتعيين وظيفة عند تحميل المستند (عندما يكون DOM بأكمله متاحًا للاستخدام). تقوم هذه الوظيفة بإنشاء عنصر H1 جديد، وإضافة نص إلى هذا العنصر، ثم إضافة H1 إلى شجرة المستندات:

< html > < head > < script >// قم بتشغيل هذه الوظيفة عند تحميل نافذة المستند. onload = function () ( // إنشاء عدة عناصر // في صفحة HTML فارغة Head = document.createElement( "h1" ) ; Heading_text = document.createTextNode( "Big Head!" ) ; Heading.appendChild( Heading_text ) ; document body.appendChild(العنوان);< body >أنواع البيانات الهامة

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

يوجد أدناه جدول يحتوي على وصف موجز لأنواع البيانات هذه.

وثيقة	عندما يقوم عضو بإرجاع كائن من النوع مستند (على سبيل المثال، تقوم الخاصية OwnerDocument للعنصر بإرجاع المستند الذي يشير إليه)، فإن كائن المستند هذا هو الكائن الجذر الخاص به. يصف القسم المرجعي لمستند DOM كائن المستند. عنصر
عنصر	يشير إلى عنصر أو عقدة من نوع العنصر الذي تم إرجاعه بواسطة عضو في DOM API. بدلًا من القول بأن التابع document.createElement()‎ يُرجع مرجعًا إلى عقدة، سنقول ببساطة أن هذا العنصر يُرجع عنصرًا تم إنشاؤه للتو في DOM. تنفذ كائنات العناصر واجهة عنصر DOM وأيضًا واجهة العقدة الأكثر عمومية. تم تضمين كلا الواجهتين في هذه المساعدة. nodeList
NodeList	مصفوفة من العناصر، مثل تلك التي يتم إرجاعها بواسطة الأسلوب Document.getElementsByTagName(). يتم الوصول إلى عناصر محددة في المصفوفة عن طريق الفهرس بطريقتين: عنصر القائمة(1) هذه الأساليب متكافئة. في الطريقة الأولى، item() هي الطريقة الوحيدة لكائن NodeList. يستخدم الأخير بناء جملة الصفيف العادي للحصول على القيمة الثانية في القائمة.
يصف	عندما يتم إرجاع السمة بواسطة عضو API (على سبيل المثال، طريقة createAttribute()) فستكون مرجعًا لكائن يوفر واجهة خاصة (وإن كانت صغيرة) للسمات. السمات هي عقد في DOM، تمامًا مثل العناصر، على الرغم من أنك نادرًا ما تستخدمها بهذه الطريقة.
اسمهNodeMap	nameNodeMap يشبه المصفوفة، ولكن يمكن الوصول إلى العناصر عن طريق الاسم أو الفهرس. الوصول عن طريق الفهرس هو فقط لتسهيل الإدراج، لأنه العناصر ليس لها ترتيب محدد في القائمة. يحتوي نوع البيانات هذا على طريقة item() لهذا الغرض ويمكنك أيضًا إضافة وإزالة العناصر من NodeMap

واجهات DOM

هذا برنامج تعليمي حول الكائنات والأشياء الفعلية التي يمكنك استخدامها لمعالجة التسلسل الهرمي لـ DOM. هناك العديد من الأماكن حيث يمكن أن يكون فهم كيفية عملها أمرًا مفاجئًا. على سبيل المثال، كائن يمثل عنصر نموذج HTML يأخذ خاصية الاسم الخاصة به من واجهة HTMLFormElement وخاصية className الخاصة به من واجهة HTMLElement. في كلتا الحالتين، الخاصية التي تريدها موجودة في كائن النموذج هذا.

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

واجهات والكائنات

تنفذ العديد من الكائنات إجراءات من واجهات متعددة. كائن الجدول، على سبيل المثال، ينفذ كائنًا خاصًا يتضمن طرقًا مثل createCaption وinsertRow. ولكن نظرًا لأن هذا جدول، فهو أيضًا عنصر HTML، وينفذ الجدول واجهة العنصر الموضحة في القسم. أخيرًا، نظرًا لأن عنصر HTML (بمعنى DOM) هو عقدة في الشجرة التي تشكل نموذج الكائن لصفحة HTML أو XML، فإن عنصر الجدول ينفذ أيضًا واجهة العقدة الأكثر عمومية التي يُشتق منها العنصر.

جدول var = document.getElementById("table"); var tableAttrs = table.attributes; // واجهة العقدة/العنصر for (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";

الواجهات الأساسية في DOM

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

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

فيما يلي قائمة قصيرة بأعضاء واجهة برمجة التطبيقات الشائعة المستخدمة في برمجة صفحات الويب وصفحات XML باستخدام DOM:

• parentNode.appendChild(عقدة)

اختبار DOM API

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

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

يمكنك استخدام صفحة الاختبار هذه أو صفحة مشابهة لاختبار واجهات DOM التي تهمك ومعرفة كيفية عملها في المتصفحات. يمكنك تحديث محتويات الدالة test() حسب الحاجة، أو إنشاء المزيد من الأزرار، أو إضافة عناصر حسب الحاجة.

< html > < head > < title >اختبارات دوم< script type = " application/javascript" >الدالة setBodyAttr (attr, value) ( ​​​​if (document.body) eval ("document.body." + attr+ "="" + value+ """ ) ; else notSupported () ; )< body > < div style =" margin : .5 in; height : 400 ; " > < p > < b > < tt >نص< form > < select onChange = " setBodyAttr(" text" , this.options.value);" > < option value = "أسود" >أسود< option value = "أزرق غامق" >أزرق غامق< p > < b > < tt >bgColor< select onChange = " setBodyAttr(" bgColor" , this.options.value);" > < option value = "أبيض" >أبيض< option value = "رمادي فاتح" >رمادي< p > < b > < tt >وصلة< select onChange = " setBodyAttr(" link" , this.options.value);" > < option value = "أزرق" >أزرق< option value = "أخضر" >أخضر< small > < a href = " http://www.brownhen.com/dom_api_top.html" id = " sample" >(رابط العينة)< br > < form > < input type = " button" value = "إصدار" onclick = " ver()" />

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

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

يسبق هذا المنشور سلسلة من المقالات حول الطرق البديلة للعمل مع XML. "بديل" لأنه، كقاعدة عامة، يقتصر العمل مع XML في 1C على تحليل XML باستخدام القراءة المتسلسلة - تحليل محتوى النص سطرًا بسطر. ولكن هناك طرق أخرى.

على سبيل المثال، استخدام لغة استعلام XML xPath أو قوالب تحويل XSL. سيتم مناقشة هذه الخيارات في المقالات المستقبلية. لكنهم جميعًا يعتمدون على تمثيل DOM الأساسي لمستندات XML. سيتم مناقشة ماهية DOM (نموذج كائن المستند) في المنشور.

يعتمد DOM على تمثيل مستند لأي بنية على شكل شجرة من العقد، تمثل كل عقدة (عقدة) منها عنصرًا، أو سمة لعنصر، أو قيمة نصية لعنصر، وما إلى ذلك. العقد مبنية على مبدأ "الوالد - المرؤوسون". جذر المستند (شجرة DOM) ليس له أصل. ليس للعنصر المسدود أي فرع (تسمى هذه العناصر بشكل تجريدي أوراق الشجرة). وبالتالي، يمكن إنشاء DOM ليس فقط لـ XML، ولكن لأي مستند منظم تقريبًا (HTML، XHTML). لذلك، على سبيل المثال، يقوم متصفح المستخدم، الذي يتلقى كود HTML لصفحة ويب من الإنترنت، ببناء شجرة DOM لهذه الصفحة في ذاكرة الوصول العشوائي (RAM) لجهاز الكمبيوتر الخاص بالمستخدم.

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

يظهر نموذج DOM لمستند XML في الشكل أدناه.

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

في النظام الأساسي 1C، يتم تمثيل نموذج DOM بواسطة كائن خاص DocumentDOM، والذي بدوره تم إنشاؤه باستخدام كائن BuilderDOM وطريقة القراءة الخاصة به. عادةً ما يكون الإدخال في هذه الطريقة إما قارئ XML أو كائن HTML Reader، الذي يقرأ مباشرة محتوى نص XML أو HTML من الملفات أو يقوم بتحميله من سلسلة. حسنًا، هناك عدد من الإنشاءات التي تسمح لك باستخراج البيانات من نموذج كائن مستند القراءة.

من بين جميع الخيارات، الأكثر إثارة للاهتمام من وجهة نظري هو الخيار رقم 1 باستخدام طريقة CalculateXPathExpression. وسيتم تخصيص المقال التالي له.

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

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

يحتوي المرجع على أوصاف لجميع خصائص وأساليب كائنات JavaScript القياسية المضمنة.

طراز كائن المستند

نموذج كائن المستند (DOM) هو واجهة برمجة تطبيقات (API) لـ XML تم توسيعها لتعمل أيضًا مع HTML.

في DOM، يتم تمثيل كل محتوى الصفحة (العناصر والنص) كتسلسل هرمي للعقد. خذ بعين الاعتبار الكود التالي:

صفحة بسيطة

مرحبا بالعالم!

يمكن تمثيل هذا الرمز باستخدام DOM كتسلسل هرمي للعقد:

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

عند وصف بنية شجرة DOM، يتم استخدام المصطلحات المستعارة من أشجار العائلة.

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

يحتوي مرجع DOM على أوصاف لكائنات Document وElement وEvent وNodeList، بما في ذلك أوصاف أساليبها وخصائصها:

دليل بوم

يوفر BOM (نموذج كائن المتصفح المترجم من الإنجليزية - نموذج كائن المتصفح) الوصول إلى نافذة المتصفح ويسمح لك بمعالجتها وعناصرها.

توفر BOMs إمكانية الوصول إلى وظائف المتصفح بغض النظر عن محتوى صفحة الويب. يعد موضوع BOM مثيرًا للاهتمام ومعقدًا في نفس الوقت، لأنه نظرًا للغياب الطويل للمواصفات، كان لمصنعي المتصفحات الحرية في توسيع BOM بالشكل الذي يرونه مناسبًا. أصبحت العديد من العناصر المتشابهة عبر المتصفحات معايير فعلية لا تزال متبعة حتى اليوم لأسباب تتعلق بالتوافق المتبادل. لتوحيد هذه الجوانب الأساسية لجافا سكريبت، حددت W3C عناصر قائمة مكونات الصنف الأساسية في مواصفات HTML5.

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

ما هو دوم

يشير الاختصار DOM إلى طراز كائن المستند(طراز كائن المستند).

DOM هي واجهة برمجة للوصول إلى محتوى مستندات HTML وXHTML وXML، أي تمثل علامات وسمات HTML وXHTML وXML، بالإضافة إلى أنماط CSS ككائنات برمجة. تعمل كل من JavaScript ولغات برمجة الويب الأخرى مع هذا النموذج.

قليلا من التاريخ

هناك 4 مستويات DOM (0، 1، 2 و 3).

يتضمن المستوى 0 (1996) نماذج DOM التي كانت موجودة قبل المستوى 1. وهي بشكل أساسي مجموعات: document.images وdocument.forms وdocument.layers وdocument.all. هذه النماذج ليست مواصفات DOM رسميًا التي نشرتها W3C. بل إنها تمثل معلومات حول ما كان موجودًا قبل بدء عملية التقييس.

يتضمن المستوى 1 (1997) أيضًا الوظائف الأساسية لمعالجة مستندات XML: طرق عديدة للعمل مع العقد الفردية، والعمل مع تعليمات معالجة XML، وما إلى ذلك.

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

أضاف DOM Level 2 (2002) العديد من الميزات الجديدة.

في حين أن DOM المستوى 1 يفتقر إلى دعم مساحات الأسماء، فإن واجهات DOM المستوى 2 تحتوي على طرق لإدارة مساحات الأسماء المرتبطة بمتطلبات إنشاء ومعالجة مستندات XML.

بالإضافة إلى ذلك، يدعم DOM المستوى 2 الأحداث.

المستوى 2 هو المستوى الحالي لمواصفات DOM، لكن W3C يوصي ببعض أقسام مواصفات المستوى 3.

DOM Level 3 عبارة عن مسودة عمل للمواصفات التي تعمل على توسيع وظائف DOM Level 2. إحدى أهم ميزات هذا الإصدار من المواصفات هي القدرة على العمل مع العديد من امتدادات DOM.

ماذا تعني عبارة "واجهة البرنامج"؟

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

أي رمز برنامج هو تفسير مفهوم للمبرمج لهذه "الأصفار والواحدات" التي يعمل بها الكمبيوتر. وبالتالي، فإن أي لغة برمجة هي واجهة بين الإنسان والآلة.

تعمل المتصفحات تمامًا مثل تطبيقات الكمبيوتر الأخرى. يقومون بترجمة أكواد HTML وXML وCSS وJavaScript وPHP وPerl وما إلى ذلك إلى "أصفار وآحاد". للتعامل مع هذا التعدد اللغوي، هناك حاجة إلى منصة مشتركة. هذه المنصة هي DOM - وهي مواصفات لا تعتمد على لغة برمجة أو ترميز محدد. وهي واجهة يمكن استخدامها في العديد من لغات البرمجة الشائعة المرتبطة بإنشاء صفحات الويب وقادرة على فهم وتفسير كائنات DOM.

DOM والمتصفحات

دوم وجافا سكريبت

في JavaScript، أعلى السلم الهرمي لكائنات DOM، وهو نوع من "الموصل" لهذه الواجهة، هو كائن المستند، وتصبح كائنات DOM خصائصه، وخصائص خصائصه، وما إلى ذلك. وتسمى أيضًا عقد DOM.

عقد DOM

هناك 12 نوعًا من العقد في المستوى 2 من DOM. يتم تعيين ثابت لكل نوع من عقد DOM باسم فريد. تم تصميم معظم العقد للعمل مع XML. في مجموعة HTML - JavaScript التي نقوم بها، يمكن استخدام 5 أنواع فقط. ولكن حتى "قمة جبل الجليد" هذه هي "شجرة منتشرة" للغاية ولا يمكن تغطيتها في درس أو درسين.

المجموعة الكاملة من ثوابت نوع العقدة المحددة في مواصفات W3C DOM (العقد المتاحة لـ HTML - يتم تمييز JavaScript باللون الأزرق):

اسم ثابت	معنى	وصف
العقدة.ELEMENT_NODE		عقدة العنصر (إرجاع العنصر الجذر للمستند، بالنسبة لمستندات HTML، هذا هو عنصر HTML)
العقدة.ATTRIBUTE_NODE		عقدة السمة (إرجاع سمة لعنصر مستند XML أو HTML)
		عقدة النص (#text)
Node.CDATA_SECTION_NODE		عقدة قسم CDATA (XML: بناء جملة بديل لعرض بيانات الأحرف)
Node.ENTITY_REFERENCE_NODE
Node.ENTITY_NODE		عقدة التقسيم
العقدة.PROCESSING_INSTRUCTION_NODE		عقدة توجيه XML
Node.COMMENT_NODE		عقدة التعليق
العقدة.DOCUMENT_NODE		عقدة الوثيقة (أساس الوصول إلى محتوى الوثيقة وإنشاء مكوناتها)
Node.DOCUMENT_TYPE_NODE		عقدة نوع المستند (تُرجع نوع هذا المستند، أي قيمة علامة DOCTYPE)
Node.DOCUMENT_FRAGMENT_NODE		عقدة جزء المستند (استخراج جزء من شجرة المستند، وإنشاء جزء مستند جديد، وإدراج جزء باعتباره فرعًا للعقدة، وما إلى ذلك)
العقدة.NOTATION_NODE		عقدة التدوين*

* التدوينات هي الأسماء التي تحدد تنسيق الأقسام غير المحللة، أو تنسيق العناصر التي لها سمة تدوين، أو برنامج التطبيق الذي يتم توجيه التوجيه إليه. (الأمر ليس واضحًا؟ ولست متأكدًا أيضًا بعد).

بنية الوثيقة في DOM

كافة كائنات المستند هي عقد DOM. دعونا نلقي نظرة على الوثيقة الأساسية:

< title>رأس DOM

نص الفقرة

فيما يلي رسم تخطيطي لشجرة DOM الخاصة بها:

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

يحتوي العنصر على عقدتين تابعتين: و، حيث تصبح جميع العناصر الموجودة فيه عناصر فرعية.

انتباه!

"العنصر" و"العلامة" ليسا مترادفين. العلامة هي علامة تمييز: - هاتان علامتان مختلفتان. والعنصر هو كائن تم وضع علامة عليه بهذه العلامات:

نص الفقرة

.

عناصر، و

يحتوي على نص في الداخل. هذه هي العقد النصية التابعة لها. يحتوي العنصر أيضًا على سمة: align="center" . عقد السمات هي أيضًا عقد فرعية للعناصر التي تحتوي عليها.

عند العمل مع عقد شجرة DOM، يتم استخدام خصائصها وأساليبها.

بعض خصائص العقد

مقدمة صغيرة

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

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

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

ولهذا السبب لن نبدأ، كما هو معتاد، بـ "الخصائص الرئيسية": NodeName وNodeValue.

اسم العلامة

تقوم بإرجاع سلسلة تحتوي على اسم علامة العنصر. تحتوي جميع قيم tagName على أحرف كبيرة فقط.

بناء الجملة

عنصر.tagName

مثال

اختبار خاصية tagName

document.write(document.getElementById( "اسم علامة الاختبار").اسم العلامة)

نتيجة

اختبار خاصية tagName

InnerHTML

لقد واجهنا هذه الخاصية بالفعل (انظر الدرس 10). والآن نفهم من أين أتت: "من المنزل".

يتيح الوصول إلى محتويات العنصر. لا يحدد محتوى النص فحسب، بل يحدد أيضًا جميع علامات HTML الموجودة داخل العنصر.

هذه الخاصية ليست فقط للقراءة، ولكن أيضًا لتغيير المحتوى.

ملحوظة

في IE، يكون InternalHTML للقراءة فقط لعدد من العناصر: هذه كلها عناصر جدول، باستثناء و ، وكذلك و .

على سبيل المثال، قمنا بإنشاء جدول فارغ بدون عنصر ونريد إدراجه برمجياً في عبر الداخليHTML :

سوف يلقي IE "خطأ غير معروف في وقت التشغيل" وستقوم المتصفحات الأخرى باللصق.

وفي الوقت نفسه، إذا قمنا بالاستعلام عن المحتوى الموجود لعنصر ما ، على سبيل المثال، عبر تنبيه (document.getElementById("id").innerHTML)، فسيعمل هذا في IE.

بناء الجملة

عنصر.innerHTML = "النص المخصص"

مثال

اختبار خاصية InnerHTML الفقرة المراد إدراجها // تقوم هذه الوظيفة بقراءة النص وإدراجه في الفقرة المحددة. اختبار الدالة القراءة () ( document.getElementById( "هدف".innerHTML = document.getElementById( "testInnerHTML").innerHTML } // تقوم هذه الوظيفة بتغيير نص الفقرة المحددة. اختبار الوظيفة () ( document.getElementById( "هدف").innerHTML = "إعادة تلوين النص وتغييره" } // تقوم هذه الدالة بإرجاع الخاصية إلى موضعها الأصلي. إعادة تعيين وظيفة الاختبار () ( document.getElementById( "هدف").innerHTML = "الفقرة المراد إدراجها" }

اختبار خاصية InnerHTML

الفقرة المراد إدراجها

InnerHTML
نص فار = element.innerHTML;
element.innerHTML = "";
يؤدي تعيين لغة HTML داخلية جديدة إلى استبدال التعليمات البرمجية، حتى إذا تم إلحاق القيمة الجديدة بالقيمة الحالية (+=). لا يتم تنفيذ البرامج النصية المضافة بهذه الطريقة.

ExternalHTML
يحتوي على العنصر بأكمله ولا يمكن تغييره. من الناحية الفنية، تؤدي الكتابة إلى هذه الخاصية إلى إنشاء عنصر جديد يحل محل العنصر القديم. لا تتغير الإشارات إلى العنصر القديم في المتغيرات.

بيانات
textNode.data - محتويات العقد النصية والتعليقات

محتوى النص
element.textContent - نص داخل العنصر بدون علامات.
هناك أيضًا خاصية غير قياسية تسمى InternalText والتي لها الكثير من القواسم المشتركة مع textContent.

رؤية العنصر

مختفي
element.hidden = صحيح
السمة المخفية غير مدعومة في IE11.

صفات

معظم السمات القياسية في DOM تصبح خصائص كائن:
العنصر.id = "المعرف"
بالنسبة للسمات غير القياسية، لا يتم إنشاء الخاصية (غير محددة)

يمكنك إنشاء خصائص DOM الخاصة بك:
element.myData = (name:"John"، الاسم الأخير:"Smith");
والأساليب:
element.myFunc = function())(alert this.nodeName);
يعمل هذا لأن عقد DOM هي كائنات JavaScript عادية. لا تؤثر هذه الخصائص والأساليب غير القياسية على عرض العلامة وتكون مرئية فقط في JavaScript.

الوصول إلى سمات العلامة:
element.hasAttribute(الاسم)
element.getAttribute(الاسم)
element.setAttribute(الاسم، القيمة)
العنصر.إزالة السمة (الاسم)
element.attributes عبارة عن مصفوفة زائفة من السمات.

السمات غير حساسة لحالة الأحرف (html)، في حين أن الخصائص حساسة لحالة الأحرف (جافا سكريبت).
قيمة السمة هي دائمًا سلسلة.

السمة: a.getAttribute("href") - تعرض بالضبط ما هو موجود في HTML
الخاصية: a.href - قد تختلف عن قيمة السمة
في أغلب الأحيان، تعتمد الخاصية على خاصية معينة، ولكن ليس العكس. تغيير الخاصية لا يؤثر على السمة.

العمل مع الفصول الدراسية

تتوافق سمة الفئة مع خاصيتين:
اسم الفئة - السلسلة
قائمة الفئات — كائن

طرق كائن classList:
element.classList.contains("class") - يتحقق مما إذا كان الكائن يحتوي على فئة معينة
element.classList.add("الفئة")
element.classList.remove("الفئة")
element.classList.toggle("class")

classList عبارة عن مصفوفة زائفة ويمكن تكرارها من خلال حلقة for.

سمات البيانات

تتوفر سمات البيانات المخصصة ليس فقط كسمات، ولكن أيضًا من خلال خاصية مجموعة البيانات
بيانات حول = "بعض القيمة"
element.dataset.about

ترتيب العقدة

يحتوي Parent.contains(child) - صحيح أو خطأ
يتحقق مما إذا كانت العقدة الفرعية متداخلة داخل الأصل

NodeA.compareDocumentPosition(nodeB) - يوفر معلومات حول المحتوى والترتيب النسبي للعناصر. قيمة الإرجاع هي قناع بت:

إضافة وإزالة العقد

فار div = document.createElement("div")
document.createTextNode("text")

parent.appendChild(element) - تتم إضافة العنصر إلى نهاية الأصل
parent.insertBefore(element, nextSibling) - تتم إضافة العنصر قبل nextSibling
parent.insertBefore(element,parent.firstChild) - يضاف إلى البداية
parent.insertBefore(element, null) - سيعمل مثل appendChild
تقوم جميع طرق الإدراج بإرجاع العقدة المدرجة.
عند نقل عنصر، لا تحتاج أولاً إلى إزالته من مكانه القديم؛ حيث تقوم طريقة الإدراج بذلك تلقائيًا.

element.insertAdjacentHTML(where, html) - يقوم بإدراج كود HTML التعسفي في أي مكان في المستند. حيث يحدد المكان الذي يجب إدراج html فيه فيما يتعلق بالعنصر - beforeBegin، afterBegin، beforeEnd، afterEnd.
element.insertAdjacentElement(حيث، newElement)
element.insertAdjacentText(أين، نص)
الطريقتان الأخيرتان غير مدعومتين في Firefox

العقدة.append(...العقد) - تُدرج العقد في نهاية العقدة،
العقدة.prepend(...العقد) - إدراج العقد في بداية العقدة،
Node.after(...nodes) - يُدرج العقد بعد عقدة العقدة،
العقدة.قبل(...العقد) - إدراج العقد قبل عقدة العقدة،
Node.replaceWith(...nodes) - يُدرج العقد بدلاً من العقدة.
العقد هنا هي عقد أو سلاسل، بأي كميات ومجموعات، مدرجة مفصولة بفواصل.

var fragment = document.createDocumentFragment() - يحاكي عقدة DOM التي تختفي عند إدراجها في مستند، تاركة فروعها فقط. لا ينصح به في المتصفحات الحديثة.

element.cloneNode(true) - نسخة عميقة من العنصر
element.cloneNode(false) - نسخ بدون عناصر فرعية

Parent.removeChild (العنصر)
Parent.replaceChild(newElement, element)
element.remove() - يزيل العنصر مباشرة، دون الرجوع إلى الأصل.
أساليب إرجاع العقدة البعيدة