مقدمة
تتمثل وظيفة DOM في تحويل صفحة الويب إلى كائن JavaScript ، بحيث يمكنك استخدام JavaScript لأداء عمليات مختلفة على صفحة الويب (مثل إضافة المحتوى وحذفه). سيقوم المتصفح بتحليل وثيقة HTML في سلسلة من العقد بناءً على نموذج DOM ، ثم تشكل بنية شجرة لهذه العقد. تسمى أصغر وحدة تكوين في DOM العقدة ، ويتكون هيكل شجرة الوثيقة (DOM Tree) من 12 نوعًا من العقد.
ملكية
بشكل عام ، تحتوي العقد على ثلاث خصائص أساسية على الأقل: nodetype ، nodename و nodevalue .
أنواع العقدة المختلفة ، تختلف قيم هذه السمات الثلاث أيضًا.
nodetype
تُرجع خاصية nodetype قيمة ثابتة لنوع العقدة. تتوافق أنواع مختلفة مع قيم ثابتة مختلفة ، و 12 نوعًا يتوافق مع القيم الثابتة من 1 إلى 12 على التوالي.
element node node.element_node (1)
سمة عقدة node.attribute_node (2)
نود العقدة.
CDATA NODE NODE.CDATA_SECTION_NODE (4)
اسم مرجع الكيان Node.entry_reference_node (5)
اسم الكيان Node.entity_node (6)
تعليمات العملية Node.Processing_instruction_node (7)
تعليق Node Node.Comment_Node (8)
Node Node.document_node (9)
نوع المستند Node Node.document_type_node (10)
عقدة شظية المستند node.document_fragment_node (11)
DTD إعلان Node Node.Notation_node (12)
يعرّف DOM واجهة عقدة ، والتي يتم تنفيذها كنوع عقدة في JavaScript ، ويتم تطبيق جميع كائنات DOM في متصفح IE8 ككائنات COM. لذلك ، لا يدعم IE8-Browser كتابة كائنات العقدة
// إرجاع 1 في المتصفح القياسي ، ويتم الإبلاغ عن خطأ في IE8-Browser ، مما دفع عقدة console.log (node.element_node) ؛ // 1
NODENAME
تُرجع خاصية اسم NodeName اسم العقدة
قيمة
تقوم خاصية NodeValue بإرجاع أو تعين قيمة العقدة الحالية ، بالتنسيق كسلسلة
بعد ذلك ، سيتم تصنيع الوصف التفصيلي من 1 إلى 12 وفقًا للترتيب المقابل للقيمة الثابتة لنوع العقدة.
【1】 عقدة العنصر
يتوافق عنصر عقدة العنصر مع عنصر علامة HTML في صفحة الويب. قيمة nodetype نوع العقدة لعقدة العنصر هي 1 ، وقيمة اسم Node NomeName هي اسم التسمية الكبير ، وقيمة القيم NODERAND NULL
خذ عنصر الجسم كمثال
// 1 'body' nullconsole.log (document.body.nodeType ، document.body.nodename ، document.body.nodevalue) console.log (node.element_node === 1) ؛ // true
【2】 عقدة ميزة
تتوافق سمة سمة العنصر مع سمات علامة HTML في صفحة الويب. إنه موجود فقط في سمات السمات للعنصر وليس جزءًا من شجرة مستند DOM. قيمة nodeType نوع العقدة للعقدة المميزة هي 2 ، قيمة اسم Node NodeName هي اسم السمة ، وقيمة القيم Nodevalue هي قيمة السمة
الآن ، يحتوي عنصر DIV على سمة ID = "اختبار"
<div id = "test"> </viv> <script> var attrate.
【3】 عقدة النص
يمثل نص العقدة النصية محتوى علامة HTML في صفحة الويب. قيمة nodeType نوع العقدة لعقدة النص هي 3 ، قيمة اسم Node NomeName هي "#Text" ، وقيمة القيم Nodevalue هي قيمة محتوى التسمية
الآن ، محتوى عنصر div هو "اختبار"
<div id = "test"> اختبار </div> <script> var txt = test.firstchild ؛ // 3 '#text' 'test' console.log (txt.nodeType ، txt.nodename ، txt.nodevalue) console.log (node.text_node === 3) ؛
【4】 عقدة CDATA
نوع cdatasection مخصص فقط للمستندات المستندة إلى XML ويظهر فقط في مستندات XML. يمثل منطقة CDATA والتنسيق عمومًا
<! [CDATA []>
قيمة nodetype من نوع العقدة من هذا النوع هي 4 ، قيمة اسم Node NomeName هي "#CDATA Section" ، وقيمة القيمة العقمية هي المحتوى في منطقة CDATA
【5】 عقدة الاسم المرجعية الكيان
الكيان هو إعلان يحدد الاسم المستخدم في XML بدلاً من المحتوى أو العلامات. كيان يحتوي على جزأين. أولاً ، يجب أن يكون الاسم مرتبطًا بمحتوى الاستبدال باستخدام إعلان الكيان. يتم إنشاء إعلانات الكيان في تعريف نوع المستند (DTD) أو مخطط XML باستخدام بناء جملة <! ثانياً ، يتم استخدام الأسماء المحددة في إعلانات الكيان في XML. عند استخدامها في XML ، يسمى هذا الاسم مرجع كيان.
نوع العقدة nodeType من اسم مرجع الكيان eddring_reference هو 5 ، اسم العقدة NodeName هو اسم مرجع الكيان ، والقيمة NOUL
// اسم الكيان <! Entity Publisher "Microsoft Press"> // CHITITY NAME Reference <BUBINFO> تم نشره بواسطة & Publisher ؛ </PUBINFO>
【6】 اسم الكيان العقدة
تم شرحه بالتفصيل أعلاه ، لذلك لن أكرره
نوع العقدة nodetype من هذه العقدة هو 6 ، اسم Node NomeName هو اسم الكيان ، والقيمة NOLE NULL
【7】 عقدة تعليمات المعالجة
إن نوع العقدة nodetype التي تتولى معالجة عقدة التعليمات لها قيمة 7 ، ويكون اسم Node NomeName له قيمة للهدف ، ولديه قيمة محتوى كامل باستثناء الهدف
【8】 عقدة التعليقات التوضيحية
يمثل تعليق عقدة التعليق تعليقات HTML في صفحة الويب. قيمة نوع العقدة nodetype للعقدة المشروحة هي 8 ، وقيمة اسم العقدة NODENAME هي "#Comment" ، وقيمة القيمة العقد هي محتوى التعليق
الآن ، هناك <!-أنا التعليق محتوى-> في عنصر div مع معرف المعرف mydiv
<div id = "mydiv"> <!-أنا محتوى التعليق-> </div> <script> var com = mydiv.firstchild ؛ // 8 '#comment' 'أنا content'console.log (com.nodeType ، com.nodename ، com.nodevalue)
【9】 عقدة المستند
يمثل مستند عقدة المستند مستند HTML ، المعروف أيضًا باسم عقدة الجذر ، مشيرًا إلى كائن المستند. NodeType نوع العقدة لعقدة المستند هو 9 ، اسم Node NomeName هو "#document" ، والقيمة NULL NULL
<script> // 9 "#document" nullconsole.log (document.nodeType ، document.nodename ، document.nodevalue) console.log (node.document_node === 9) ؛ // true </script>
【10】 عقدة نوع المستند
DocumentType Node DocumentType يحتوي على جميع المعلومات حول doctype من المستند. قيمة nodeType نوع العقدة لعقدة نوع المستند هي 10 ، قيمة اسم Node NodeName هي اسم doctype ، وقيمة القيم العقد فارغة
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> مستند </title> </head> <body> <script> var novedocumenttype = document.firstchild ؛ // 10 "html" nullconsole.log (novedocumenttype.nodeType ، novedOcumentType.Nodename ، novedocumentType.nodevalue) ؛ console.log (node.document_type_node === 10) ؛ </script> </html>
【11】 عقدة شظية المستند
لا يحتوي DocumentFragment DocumentFragment على علامات مقابلة في المستند. إنه مستند خفيف الوزن يمكن أن يحتوي على العقد والتحكم فيه ، ولكنه لن يتغلب على موارد إضافية مثل وثيقة كاملة. نوع العقدة nodetype من هذه العقدة هو 11 ، اسم Node NomeName هو "#ثقيلة المستند" ، والقيمة NOULL NULL
<script> var nodeDocumentFragment = document.createdOcumentFragment () ؛ // 11 "#document-fragment" nullconsole.log (novedOcumentFragment.NodeType ، nodedocumentFragment.Nodename ، novedocumentfragment.nodevalue) ؛ console.log (node.document_fragment_node === 11) ؛ // true </script
【12】 عقدة إعلان DTD
يمثل تدوين عقدة إعلان DTD الرمز المعلن في DTD. نوع العقدة nodetype من هذه العقدة هو 12 ، اسم Node NomeName هو الاسم الرمزي ، والقيمة NOND NULL
لخص
من بين أنواع العقدة الـ 12 DOM هذه ، بعضها مناسب لمستندات XML ، وبعضها لا يستخدم بشكل شائع. أما بالنسبة للأنواع الشائعة الاستخدام ، فسوف نقدمها بالتفصيل لاحقًا. توفر هذه المقالة فقط لمحة عامة عن هذه الأنواع 12 العقدة. آمل أن يكون هذا المقال مفيدًا للجميع.