في بداية المقال، أريد أن أذكر بشكل عام ما هو DOM وما هو BOM ، لأن هذه المقالة تستهدف في النهاية الأصدقاء الذين لديهم أساس معين في JavaScript، لكنهم لا يفهمون أو حتى يعرفون عن DOM وBOM. .
ومع ذلك، قبل أن نتحدث عن ما هو DOM وما هو BOM ، من فضلك اسمح لي أن أعرض لك البنية الكاملة لجافا سكريبت :
في الصورة أعلاه، يمكننا أن نرى أن هناك أربعة عناصر: JavaScript، وECMAScript، وDOM، وBOM ، فما هو الرابط بين هذه العناصر الأربعة؟ استخدم معادلة لتلخيص العلاقة بينهما:
JavaScript = ECMAscript + BOM + DOM
دعنا نعطي نظرة عامة عليهم واحدًا تلو الآخر :
ECMAscript:
ECMAScript هي لغة تم تمريرها من قبل ECMA International (رابطة مصنعي أجهزة الكمبيوتر الأوروبية سابقًا) من خلال ECMA- 262 هي لغة برمجة نصية موحدة هي المعيار لجافا سكريبت (JS للاختصار)، والمتصفحات تطبق هذا المعيار .
يشبه ECMAscript لائحة تنص على كيفية تنفيذ كل متصفح لبناء جملة JavaScript ، لأننا نعلم أن JavaScript هي لغة برمجة نصية تعمل على المتصفح! هناك لوائح، لكننا مازلنا نفتقر إلى طريقة للتفاعل مع كل عنصر في الصفحة . في هذا الوقت، وُلد DOM التالي!
DOM:
DOM ( نموذج كائن المستند ) عبارة عن واجهة برمجة تطبيقات مستقلة عن اللغة لتشغيل مستندات xml وhtml .
بالنسبة لجافا سكريبت: لتمكين جافا سكريبت من تشغيل HTML ، تمتلك جافا سكريبت واجهة برمجة DOM خاصة بها .
في جملة واحدة: يوفر DOM لجافا سكريبت "طريقة" للوصول إلى عناصر HTML وتشغيلها (سبب عدم استخدامنا لكلمة الواجهة هو أننا نخشى أن يخاف بعض الأصدقاء عندما يرون الواجهة، ولكن في الواقع الوصف الأكثر دقة هو JavaScript) يتم توفير الواجهة )
BOM:
BOM هو نموذج كائن المتصفح، ونموذج كائن المتصفح . BOM هي واجهة تظهر للتحكم في سلوك المتصفح .
بالنسبة لجافا سكريبت: من أجل السماح لجافا سكريبت بالتحكم في سلوك المتصفح ، تمتلك جافا سكريبت واجهة BOM الخاصة بها .
في جملة واحدة: توفر BOM لجافا سكريبت "طريقة" للتحكم في سلوك المتصفح.
أخيرًا، من بين المكونات الثلاثة المذكورة أعلاه لجافا سكريبت، يعد ECMscript بمثابة مواصفات ، بينما يوفر العنصران المتبقيان "طرقًا" تتوافق مع عناصر HTML والمتصفحات على التوالي ، لذا نركز أدناه على العنصرين الأخيرين: DOM وBOM، ونقدم شرحًا منهجيًا . وبما أنها مخصصة للمبتدئين، فإن شرحي التالي سيكون بسيطًا وسهل الفهم قدر الإمكان. إذا لم يكن لديك أساس جيد، يمكنك تناوله بثقة !
أولاً، دعونا نشرح المعرفة المتعلقة بـ DOM ، وقد قسمتها إلى قسمين :
حسنًا، ما هي شجرة DOM؟
قد لا يكون بعض المبتدئين الذين تعلموا DOM على دراية بهذه الكلمة، ولكن في الواقع، شجرة DOM ليست شيئًا خياليًا بشكل خاص، على العكس من ذلك، بالنسبة لموظفي الواجهة الأمامية، فإن شجرة DOM هي HTML للصفحات التي تقوم بمعالجتها كل يوم الشجرة مكونة من عناصر:
في شجرة BOM ، يمكن أن يكون لكل عقدة هويتين: يمكن أن تكون عقدة فرعية للعقدة الأصلية، أو يمكن أن تكون العقدة الأصلية للعقد الفرعية الأخرى معًا :
<!DOCTYPE html>
<html لانج="ar">
<الرأس>
<ميتا محارف = "UTF-8">
<title>DOM_demo</title>
</الرأس>
<الجسم>
<ص>
<a href="https://blog.csdn.net/qq_52736131">جراد البحر يرقص التانغو</a>
</ص>
</الجسم>
</html> بالنسبة للكود أعلاه، يجب أن تكون شجرة DOM الخاصة بها كما يلي:
في هذا الوقت، يريد شخص ما أن يسأل، هل تعتقد أن شجرة DOM لفترة طويلة لها علاقة بتشغيل عناصر html ؟
الإجابة وثيقة الصلة بالموضوع، وفقط من خلال فهم بنية شجرة DOM للمستند يمكننا تشغيل عناصر DOM بدقة وفعالية ، وإلا ستظهر أخطاء مختلفة غير متوقعة. قبل أن نقوم بتشغيل عناصر HTML للصفحة، يجب أن يكون لدينا رسم واضح لـ DOM للصفحة بأكملها . حتى لو لم نرسم فعليًا، يجب أن يكون لدينا بنية سياقية واضحة في أذهاننا.
فيما يتعلق ببعض الطرق الشائعة لتشغيل عناصر html في DOM في JavaScript ، فقد قسمتها إلى عدة أجزاء فرعية لأقدمها لك:
// 1. Pass Get قيمة سمة معرف العنصر، وإرجاع كائن عنصر var element = document.getElementById(id_content) //2. احصل على العنصر من خلال قيمة سمة الاسم الخاصة به، وأرجع مصفوفة من كائنات العناصر var element_list = document.getElementsByName(name_content) //3. احصل على العنصر من خلال قيمة سمة فئة العنصر، وأرجع مصفوفة من كائنات العنصر var element_list = document.getElementsByClassName(class_content) //4. احصل على العنصر من خلال اسم العلامة وأرجع مصفوفة من كائنات العناصر var element_list = document.getElementsByTagName(tagName)
//1. الحصول على قيمة السمة للعنصر. المعلمات التي تم تمريرها هي بطبيعة الحال أسماء السمات، مثل الفئة، والمعرف، و href فار attr = element.getAttribute(attribute_name) //2. قم بتعيين قيمة السمة للعنصر. المعلمات التي تم تمريرها هي بطبيعة الحال اسم السمة للعنصر وقيمة السمة المقابلة التي سيتم تعيينها element.setAttribute(attribute_name,attribute_value)
//1. قم بإنشاء عنصر html، والمعلمة التي تم تمريرها هي نوع العنصر، مثل p، h1-5، a، مع أخذ p كمثال أدناه var element = document.createElement( "ع") //2. قم بإنشاء عقدة نصية وتمرير محتوى النص المقابل (لاحظ أنها عقدة نصية وليست عنصر html) فار text_node = document.createTextNode(text) //3. أنشئ عقدة سمة، والمعلمة التي تم تمريرها هي اسم السمة المقابل var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
انتبه بشكل خاص إلى الطريقة الثالثة، ويجب أن تتطابق طريقة إنشاء عقدة السمة مع عنصر محدد ، أي أنه يجب عليك أولاً الحصول على عنصر عنصر محدد، وإنشاء عقدة سمة، وأخيرًا إضافة هذا. عقدة السمة لهذا العنصر ( setAttributeNode) .
//1. أضف عقدة إلى نهاية العنصر. المعلمة التي تم تمريرها هي نوع العقدة element.appendChild(Node) //2. أدخل عقدة أمام العقدة الموجودة داخل العنصر، ثم قم بتمرير معلمة نوع العقدة element.insertBefore(new_Node,available_Node
) . في نفس الوقت، حدد عنصر العقدة الأصلية . في الطريقة الثانية، عليك أيضًا العثور على العقد الشقيقة خلف موضع الإدراج .
،
المعلمة التي تم تمريرها هي معلمة نوع العقدة element.removeChild(Node).
أخيرًا، بعض سمات DOM الشائعة :
//1. احصل على العقدة الأصلية للعنصر الحالي var element_father = element.parentNode //2. احصل على العقدة الفرعية لنوع عنصر html للعنصر الحالي var element_son = element.children //3. احصل على جميع أنواع العقد الفرعية للعنصر الحالي، بما في ذلك عناصر html والنص والسمات var element_son = element.childNodes //4. احصل على العقدة الفرعية الأولى للعنصر الحالي var element_first = element.firstChild //5.احصل على العنصر الشقيق السابق للعنصر الحالي var element_pre = element.previousSibling //6. احصل على العنصر الشقيق التالي للعنصر الحالي var element_next = element.nextSibling //7. احصل على النص الكامل للعنصر الحالي، بما في ذلك كود مصدر HTML والنص var element_innerHTML = element.innerHTML. //8.احصل على النص الكامل للعنصر الحالي، باستثناء كود مصدر html var element_innerTEXT = element.innerText.
من بينها، يعني السابع تحويل كود html والنص الموجود في العنصر إلى نص ورمز html الأصلي تم تنفيذه، وتحويله إلى نص يعادل تحويله إلى سلسلة عادية!
بعد ذلك، سنتحدث عن BOM مرة أخرى نظرًا للمساحة المحدودة، لن يتم شرح BOM بالتفصيل (التطبيق العملي ليس رائعًا مثل DOM). دعونا نراجع المقدمة حول BOM في البداية:
توفر BOM عدة "طرق" لجافا سكريبت لتشغيل المتصفح.
أولاً، دعنا نستخدم صورة لفرز بنية BOM بالكامل، كما هو الحال مع DOM، يحتوي BOM أيضًا على بنية شجرة:
من الصورة أعلاه، يمكننا أن نرى:
النافذة هي الجزء العلوي من السلسلة الغذائية لشجرة BOM بأكملها ، لذلك تعتبر كل نافذة مفتوحة حديثًا كائن نافذة.
يحتوي كائن النافذة على الخصائص والأساليب الشائعة التالية:
| خاصية/طريقة | المعنى |
| فتاحة | النافذة الأصلية لطول النافذة الحالي |
| عدد | الإطارات في |
| مستند | النافذةكائن المستند المعروض حاليًا في |
| تنبيه النافذة (سلسلة) | يقوم بإنشاء مربع حوار تحذير و يعرض رسالة |
| إغلاق () | إغلاق النافذة |
| تأكيد () | إنشاء مربع حوار يتطلب تأكيد المستخدم |
| فتح (url، name، [options]) | فتح نافذة جديدة وإرجاع |
| موجه كائن النافذة الجديد (text، defaultInput) | إنشاء مربع حوار يتطلب من المستخدم إدخال المعلومات |
| setInterval(expression, millisec) | يحسب تعبيرًا بعد الفاصل الزمني المحدد |
| setInterval(function, millis enconds, [arguments]) | يستدعي دالة setTimeout(expression, milli Seconds) بعد الفاصل الزمني المحدد |
| setTimeout (التعبير، ملي ثانية | |
| ) | بعد انتهاء المؤقت | يحسب دالة بعد انتهاء المؤقت، |
يمكنك أن ترى أن هناك تنبيهًا للوظيفة () أعلاه ، لأنه عندما نتعلم جافا سكريبت، فإن معظمها نستخدم النافذة المنبثقة لوظيفة التنبيه () كدفق للإدخال والإخراج. هذا هو العرض التوضيحي الأول لي ، لذا عندما ترى هذا، قد تسأل:
عندما استخدمت وظيفة التنبيه ()، يبدو أن هذه النافذة لم يتم ذكرها. فهل التنبيه() هنا هو نفس التنبيه() الذي تعلمته من قبل ؟ الجواب هو:
هذين التنبيهين هما بالفعل نفس الوظيفة . السبب وراء إمكانية حذف window هو أنه يمكن التعبير عن جميع خصائص وأساليب window بطريقتين :
(1) window.property/window.
(2) استدعاء السمة/الطريقة المباشرة ()
ليس مجرد تنبيه ()، جميع سمات ووظائف النافذة المذكورة أعلاه صالحة، ويمكن للأصدقاء المهتمين تجربتها بأنفسهم.
ما هو كائن الموقع ؟
كائن الموقع هو إحدى سمات كائن النافذة التي توفر معلومات حول المستند الذي تم تحميله في النافذة الحالية وتوفر أيضًا بعض وظائف التنقل.
يحتوي كائن الموقع على السمات والأساليب الشائعة التالية:
| اسم | المضيف | |
| لمحتوى | السمة/الطريقة | |
| المضيف | اسم المضيف | |
| href | عنوانURL بالكامل | |
| اسم | المسار اسم | |
| المنفذ | رقم المنفذ | |
| البروتوكول | بروتوكول | |
| بحث | جزءالاستعلام سلسلة | |
| إعادة تحميل () | يعيد تحميل عنوان URL الحالي | |
| باستخدام | repalce () | يحل عنوان URL الجديد محل الصفحة الحالية. |
في الواقع، إذا راقبنا مخطط البنية أعلاه بعناية، فسنجد أن
كائن الموقع ليس فقط سمة لكائن النافذة، ولكنه أيضًا سمة لكائن المستند.
وهذا يعني:
window.location = location = document.location
ما هو كائن التاريخ ؟
كائن السجل هو سمة لكائن النافذة، فهو يحفظ سجل وصول المستخدم إلى الإنترنت. ويتم حساب الطابع الزمني لهذا السجل من لحظة فتح النافذة.
يحتوي كائن السجل على السمات والأساليب الشائعة التالية:
| وصف | السمة/الطريقة |
| عدد | السجلات في كائن السجل |
| back() | يذهب إلى عنوان URL السابق لإدخال سجل المتصفح، على غرار العودة |
| للأمام () | يذهب إلى عنوان URL التالي لإدخال سجل المتصفح، يشبه المضي |
| قدمًا (رقم) | يتحرك المتصفح للأمام أو للخلف في كائن السجل |
أخيرًا، دعنا نقدم كائن المستكشف :
كائن المستكشف هو سمة نافذة في قائمة مكونات الصنف (BOM) التي تحدد متصفح العميل.
بعض السمات الشائعة المتعلقة بالمستكشف:
| وصف | السمة |
| اسم التطبيق | اسم المتصفح الكامل وإصدار |
| الأساسي | للنظام حيث |
| المكونات الإضافية | لمعلومات المكونات الإضافية المثبتة في |
| سلسلة وكيل المستخدم | userAgent | للمتصفح،
| userLanguage، | اللغة الافتراضية لنظام التشغيل |