تكوين JS
نعلم جميعًا أن javascript لديها ثلاثة أجزاء: ECMAScript و DOM و BOM . اعتمادًا على المضيف (المتصفح) ، تختلف المظاهر المحددة أيضًا ، كما أن المتصفحات والمتصفحات الأخرى لها أنماط مختلفة تمامًا.
1. DOM هو معيار W3C ؛ [المعيار الذي تتوافق معه جميع المتصفحات بشكل عام]
2. يعتمد BOM على DOM من قبل مختلف الشركات المصنعة للمتصفح
التنفيذ على كل متصفح ؛ [يتجلى كتعريفات مختلفة لمتصفحات مختلفة ، وطرق التنفيذ مختلفة]
3. النافذة هي كائن BOM ، وليس كائن JS ؛
DOM (نموذج كائن المستند) هو واجهة برنامج التطبيق ( API ) لـ HTML و XML .
يتعامل BOM بشكل أساسي مع نوافذ المتصفح والأطر ، ولكن عادةً ما تعتبر ملحقات JavaScript الخاصة بالمتصفح جزءًا من BOM. وتشمل هذه الامتدادات:
تحرك نافذة النافذة المنبثقة في المتصفح الجديد ، وإغلاق نافذة المتصفح ، وتغيير حجم النوافذ. تحديد الكائنات التي توفر تفاصيل متصفح الويب. كائنات الشاشة التي توفر تفاصيل دقة شاشة المستخدم. دعم ملفات تعريف الارتباط. وقد مدد IE BOM وأضاف فئة ActivexObject. يمكن إنشاء كائنات ActiveX من خلال JavaScript.
تصل javacsript ، وعناصر التحكم ، وتعديل العميل (المتصفح) عن طريق الوصول إلى كائن BOM (نموذج كائن المتصفح). نظرًا لأن window BOM تحتوي على document ، يمكن استخدام خصائص وطرق كائن النافذة مباشرة وتصورها. لذلك ، يمكن استخدام سمة document لكائن window مباشرة ، ويمكن الوصول إلى محتوى وهيكل مستند XHTML واسترداده وتعديله من خلال سمة document . لأن كائن document هو عقدة الجذر لنموذج DOM (نموذج كائن المستند). يمكن القول أن BOM يحتوي على DOM (كائن) ، ويوفر المتصفح إمكانية الوصول إلى كائن BOM ، والذي يصل بعد ذلك إلى كائن DOM ، بحيث يمكن لـ JS تشغيل المتصفح والمستندات التي يقرأها المتصفح. في
DOM يحتوي على: window
يحتوي كائن النافذة على خصائص: مستند ، الموقع ، التنقل ، الشاشة ، السجل ، عقدة جذر FramesDocument تحتوي على العقد الفرعية: النماذج ، الموقع ، المرساة ، الصور ، الروابط
يمكن رؤيته من window.document
الفرق: يصف DOM الطرق والواجهات لمعالجة محتوى صفحة الويب ، ويصف BOM الطرق والواجهات للتفاعل مع المتصفح.
تلبية دوم
لنلقي نظرة على الكود التالي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8" href = "http://www.baidu.com"> javaScript dom </a> </h2> <p> قم بتشغيل عناصر html ، إضافة أو تغيير أو إزالة أنماط css ، إلخ.
تحلل رمز HTML في مخطط التسلسل الهرمي لعقدة DOM:
** يمكن القول أن مستندات HTML عبارة عن مجموعة من العقد. تشمل عقد DOM: ** 1. العقد العناصر: في الشكل أعلاه ، <html> ، <body> ، <p> ، وما إلى ذلك ، كلها عقد عناصر ، أي العلامات. 2. العقدة النصية: المحتوى المعروض للمستخدمين ، مثل JavaScript و DOM و CSS والنص الآخر في <li> ... </li>. 3. عقدة السمة: سمات العنصر ، مثل سمة الارتباط href = "http://www.baidu.com" من علامة <a>.
سمة عقدة السمة node nodename إرجاع سلسلة محتواها هو اسم العقدة nodetype إرجاع عدد صحيح. تمثل هذه القيمة نوع قيمة العقدة المحددة لإرجاع القيمة الحالية للعقدة المحددة.
تُرجع اطفال عقدة شجرة الترابية عبر ترافعة الأشجار صفيفًا ، وتتألف هذه الصفيف من أطفال من العنصر المعطى فيرستشيلد لإرجاع أول عقدة الطفل التي تُرجع "العقد الوالدين" العقد السابق للعقدة الأصل التي تعود إلى عودة العلم السابق للعقدة.
عملية DOM OPERM OPERATION CREATEELEMENT (element) إنشاء عنصر جديد CreateTextNode () قم بإنشاء عقدة نصية جديدة تحتوي على نص نص محدد () أضف قسمًا جديدًا للطفل بعد قائمة العقدة الأخيرة لعقدة إدراج محدد () إدراج عقدة محددة () استبدال elem مع عقدة أخرى
يمثل DOM المستندات عن طريق إنشاء شجرة ، واصف الأساليب والواجهات لمعالجة محتوى الويب ، بحيث يكون للمطورين تحكمًا غير مسبوق في محتوى الوثائق وهيكلها. باستخدام API DOM ، يمكن حذف العقد بسهولة وإضافتها واستبدالها.
1. العقد الوصول
`var ohtml = document.documentElement ؛` // إرجاع عقدة جذر المستند الموجودة في مستندات XML و HTML. يحتوي OHTML على كائن htmlelement `document.body` يمثل <html/> // // هو امتداد خاص لصفحات html ، مما يوفر وصولاً مباشرًا إلى </span> <span> </span> </span>` `document.getElementById (" id ")` // إرجاع العنصر من خلال المعامل المحدد ، إرجاع العنصر بالاسم كمعرف محدد `document.getElementByName (" name ")` مع الاسم كمعرف محدد // احصل على جميع العناصر مع سمات الاسم مساوية للقيمة المحددة. ومع ذلك ، على IE6 و Opera7.5 ، ستعيد أيضًا عناصر مع ID كاسم معين والتحقق فقط من <input/> و <img/> `var x = document.getElementsByTagname (" p ") ؛` // استخدم اسم العلامة المحدد لإرجاع جميع العناصر في قائمة العقيدة ، مع بدء رقم الفهرس من 0.2. خصائص وطرق العقد العقدة
FirstChild // Node ، أشر إلى العقدة الأولى في قائمة الأطفال LastChild // ، تشير إلى العقدة الأخيرة في قائمة parentnodes قائمة ParentNodes // Node ، تشير إلى Owner Node OwnerDocument // وثيقة آخر ، تشير إلى أن هذه العقدة تنتمي إلى FirstChild // Node ، تشير إلى أول نود في القائمة. قائمة parentnodes قائمة parentnodes قائمة childnodes // node ، تشير إلى العقدة الأصل childnodes // nodeList ، قائمة جميع الأطفال سابقًا /العقدة ، أشر إلى عقدة الأخادة السابقة: إذا كانت هذه العقدة الأولى ، فإن هذه العدد الأول ، فإن القيمة هي أن القيمة هي التي لا توجد فيها قيمة. `haschildnodes ()` // boolean ، عندما تحتوي الأطفال على عقد واحد أو أكثر ، يتم إرجاع القيمة الحقيقية.
3. الأحداث
يحتوي DOM على نموذجين للأحداث في نفس الوقت: حدث الفقاعات والتقاط الفقاعة الحدث: يتم تشغيل الأحداث بالترتيب من هدف الحدث الأكثر تحديداً إلى هدف الحدث الأقل تحديداً <body onClick = "Handleclick ()"> <div onClick = "Handleclick ()> انقر لي </div> </body> ترتيب Triggering: div ، body ، html ، html ، html ، html ، html) (موزيلا 1.0). الحدث الذي تم التقاطه: في العملية المعاكسة لحدث الفقاعات ، تبدأ الأحداث من أكثر الكائنات غير الدقيقة ، ثم إلى الترتيب الأكثر دقة في تشغيل المثال أعلاه هو: المستند ، div. خاصية فريدة من نوعها لنموذج الأحداث DOM هي أن العقد النصية تؤدي أيضًا إلى تشغيل الأحداث (وليس في IE).
4. وظيفة معالجة الأحداث/وظيفة الاستماع
** وظيفة معالج الأحداث/وظيفة المستمع ** في JavaScript: var odiv = document.getElementById ("div1") ؛ odiv.onclick = function () {// onClick لا يمكن استخدامها إلا في حالة صغيرة ، الافتراضي هو تنبيه حدث الفقاعة ("النقر!") ؛ } في html: <div onclick = "javaScript: ALERT (" Clicked! ")"> </viv> // OnClick تعسفي في الحالةIE معالجات الأحداث المرفقة () و detachevent ()
في IE ، يحتوي كل عنصر من العناصر والنافذة على طريقتين: attachEvent()和detachEvent() ، والتي تقبل معلمتين متطابقين ، اسم معالج الأحداث ودالة معالج الأحداث ، مثل:
[Object] .attachevent ("name_of_event_handler" ، "function_to_attach") [object] .detachevent ("name_of_event_handler" ، "function_to_remove") var fnclick = function () {Alert ("plicked!") ؛ } odiv.attachevent ("onClick" ، fnclick) ؛ // إضافة وظيفة معالجة الأحداث odiv.attachevent ("onClick" ، fnclickanother) ؛ // يمكنك إضافة وظائف معالجة الأحداث المتعددة odiv.detachevent ("onClick" ، fnclick) ؛ // إزالة وظيفة معالجة الأحداث odiv.detachevent ("onClick" ، fnclick) ؛ // إزالة وظيفة معالجة الأحداث odiv.detachevent ("onClick" ، fnclick) ؛ // إزالة وظيفة معالجة الأحداث odiv.attachevent ("onClick" ، fnclick) ؛ // إزالة وظيفة معالجة الأحداث odiv.attachevent ("onClick" ، fnclick) ؛ // إزالة وظيفة معالجة الأحداث odiv.detachevent ("onClick" ، fnclick) ؛ // إزالة وظيفة معالجة الأحداث odiv.attachevent ("onClick" ، fnclick) ؛ // إزالة وظيفة معالجة الأحداث odiv.attachevent ("onClick" ، fnclick) ؛ // إزالة وظيفة معالجة الأحداث باستخدام طريقة attachEvent() ، يعمل معالج الأحداث في النطاق العالمي ، وبالتالي فإن هذه النافذة تساوي.
معالج حدث المتصفح
addHandler()和removeHandler() تنتمي طريقة addHandler() إلى كائن يسمى eventuntil (). تقبل كلتا الطريقتين ثلاث معلمات متطابقة ، العنصر المراد تشغيله ، اسم الحدث ووظيفة معالج الأحداث.
نوع الحدث
** نوع الحدث ** الحدث الماوس: انقر ، dbclick ، mousedown ، mouseup ، mouseover ، mouseout ، mousemove لوحة مفاتيح الحدث: keydown ، keypress ، keyup html الحدث: التحميل ، إلغاء تحميل ، إحباط ، خطأ ، تحديد ، تغيير ، إرسال ، إعادة حجم ، scroll ، التركيز ، Blur ،
معالج الأحداث
يستجيب البرنامج الذي ينفذ رمز JavaScript للأحداث عند حدوث الأحداث. استجابة لحدث معين
يسمى الكود الذي تم تنفيذه معالج الأحداث.
بناء الجملة لاستخدام معالجات الأحداث في علامات HTML هو:
<HTML标签事件处理器="JavaScript代码''>معالج الأحداث
الحدث هو إجراء معين يقوم به المستخدم أو المتصفح نفسه. على سبيل المثال click,mouseup,keydown,mouseover ، إلخ. جميع أسماء الأحداث. تسمى الوظيفة التي تستجيب لحدث معين معالج الأحداث (مستمع الأحداث). يبدأ معالج الأحداث مع on ، وبالتالي فإن معالج الحدث click هو onclick
DOM Level 0 معالج الأحداث
معالج الأحداث على مستوى DOM: قم بتعيين وظيفة إلى سمات المعالج للحدث
<type type = "button" value = "button 2" id = "ben2"/> var btn2 = document.getElementById ('btn2') ؛ احصل على كائن زر btn2 btn2.onclick // إضافة سمة onclick إلى btn2 ، وتؤدي السمة إلى تشغيل معالج الأحداث btn2.onclick = function () {} // إضافة وظيفة مجهولة btn2كيف تتوقف عن الفقاعات؟
هناك الطرق التالية لمنع الفقاعات:
e.cancelBubble=true;e.stopPropagation();return false;النص الداخلي ، innerhtml ، Outerhtml ، النص الخارجي
innertext ، innerhtml ، outerhtml ، النص الخارجي النصية: يشير إلى النص بين علامة البداية وعلامة نهاية العلامة الداخلية: رمز html الذي يمثل جميع العناصر ونص العنصر ، مثل: <b> <b> hello </b> world </div innertx يتم استبدال العقدة ، وتُرجع المشكلة نفس المحتوى مثل innertext outerhtml: الفرق من السابق هو أنه يتم استبدال العقدة الهدف بأكملها ، ويتم إرجاع رمز HTML الكامل للعنصر ، بما في ذلك العنصر نفسه
معالج الأحداث المستوى 2 DOM
تحدد أحداث DOM Level 2 طريقتين لتحديد وحذف تشغيل معالج الأحداث. addEventListener() و removeEventListener()
addEventListener () و removeEventListener ()
في DOM ، يتم استخدام AddEventListener () و removeEventListener () لتخصيص وإزالة معالجات الأحداث. على عكس IE ، تتطلب هذه الطرق ثلاث معلمات: اسم الحدث ، سواء تم تخصيص الوظيفة واستخدام وظيفة المعالجة لمرحلة الفقاعة (خطأ) أو مرحلة الالتقاط (صواب). الافتراضي هو مرحلة الفقاعة الخاطئة [Object] .adDeventListener ("name_of_event" ، fnhander ، bcapture) [object] .RemoveEventListener ("name_of_event" ، fnhander ، bcapture) var fnclick = function () {alert ("نقر!") ؛ } odiv.addeventListener ("onClick" ، fnclick ، false) ؛ // إضافة وظيفة معالجة الأحداث odiv.addeventListener ("onClick" ، fnclickanother ، false) ؛ // مثل IE ، يمكن إضافة وظائف معالجة الأحداث المتعددة ODIV.RemoveEventListener ("OnClick" ، fnclick ، false) ؛ // إزالة وظيفة معالجة الأحداث إذا كنت تستخدم AddEventListener () لإضافة وظيفة معالجة الأحداث إلى مرحلة الالتقاط ، يجب عليك تحديد في RemoveEventListener () كمرحلة الالتقاط لحذف وظيفة معالجة الأحداث بشكل صحيح ODIV.OnClick = fnclick ؛ Odiv.Onclick = fnclick ؛ // استخدم المهمة المباشرة ، ستقوم وظائف معالجة الأحداث اللاحقة بتكوين وظيفة المعالجة السابقة Odiv.onclick = fnclick ؛ Odiv.AdDeventListener ("onClick" ، fnclickanother ، false) ؛ // سيتم استدعاء المكالمة بالترتيب ولن يتم الكتابة فوقهاصورة لفهم outhtml ، النص الداخلي ، innerhtml:
DOM Basic Operation Mind Map
لمزيد من التفصيل XML DOM - لخصائص وطرق كائنات العناصر ، يرجى زيارة W3CShool
جزء بوم
جوهر BOM هو window ، وكائن window له دور مزدوج. إنها واجهة للوصول إلى نافذة المتصفح من خلال JS وكائن Global . هذا يعني أن أي كائن ومتغير ووظيفة محددة في صفحة الويب يأخذ نافذة ككائن global لها.
window.close () ؛ // أغلق نافذة window.alert ("رسالة") ؛ // تنبثق مربع رسالة نظام مع أزرار موافق ، مع عرض نافذة النص المحددة. confirm ("هل أنت متأكد؟") ؛ // قم بإطفاء مربع حوار استعلام مع أزرار موافق وإلغاء ، وإرجاع نافذة قيمة منطقية ("ما هو اسمك؟" ، "افتراضي") ؛ // تطالب المستخدم بإدخال المعلومات وقبول معلمتين ، وهما النص الذي سيتم عرضه على المستخدم والقيمة الافتراضية في مربع النص ، وإرجاع القيمة في مربع النص كقيمة دالة. // يمكنك تغيير نص شريط الحالة مؤقتًا. DefaultStatus // يمكن لمعلومات شريط الحالة الافتراضية تغيير النص قبل أن يترك المستخدم نافذة الصفحة الحالية. // قم بتعيين الكود المحدد بعد العدد المحدد من المللي ثانية ، وقبل المعلمات 2 ، والرمز المراد تنفيذه وعدد ميلي ثانية ليتم انتظار window.cleartimeout ("id") ؛ // قم بإلغاء الإيقاف المؤقت الذي لم يتم تنفيذه ، وتمرير معرف الإيقاف المؤقت إلى Window.setInterval (وظيفة ، 1000) ؛ // كرر الكود المحدد كل فترة زمنية محددة بشكل لا نهائي ، فإن المعلمات هي نفسها مثل window.clearinterval ("id") ؛ // قم بإلغاء الفاصل الزمني وقم بتمرير معرف الفاصل الزمني إلى Window.history.go (-1) ؛ // الوصول إلى تاريخ نافذة المتصفح. الرقم السلبي متخلف والرقم الإيجابي هو window.history.back () ؛ // كما هو مذكور أعلاه window.history.forward () ؛ // كما هو مذكور أعلاه window.history.length // يمكنك عرض عدد الصفحات في التاريخكائن الوثيقة
كائن المستند: إنها في الواقع خاصية لكائن النافذة. المستند == window.document هو صحيح ، إنه الكائن الوحيد الذي ينتمي إلى كل من BOM و DOM document.lastmodified // احصل على السلسلة التي تمثل المستند. rerferrer // تستخدم لتتبع روابط المستخدم إلى المستند. في page document.Forms [0] أو document.forms ["formName"] // الوصول إلى جميع النماذج المستند. document.embeds ["inmbedName"] // الوصول إلى جميع الكائنات المدمجة document.write () ؛ أو document.writeln () ؛ // إدراج سلاسل إلى حيث يتم استدعاؤها
كائن الموقع
كائن الموقع: يمثل عنوان URL الخاص بنافذة التحميل ، ويمكن أيضًا الرجوع إليه بواسطة Window.Location location.href // عنوان URL الكامل للصفحة المحملة حاليًا ، مثل http://www.somewhere where.com/pictures/index.htm location.portocol // protocol المستخدمة في url ، وهذا هو الجزء المقبل من slits ، مثل htt ، مثل htt ، مثل htt. مثل www.wrox.com الموقع. بشكل افتراضي ، لا تحتوي معظم عناوين URL على معلومات المنفذ ، مثل 8080 location.pathname // الجزء بعد اسم المضيف في عنوان url ، مثل /pictures/index.htm location.search // الجزء بعد علامة السؤال في url الذي ينفذ على طلب get أيضًا ، يسمى سلسلة الاستعلام ، مثل param = xxxx location.hash. location.assign ("http: www.baidu.com") ؛ // نفس الموقع. href ، سيتم إضافة العنوان الجديد إلى موقع stack stack الخاص بالمتصفح ("http: www.baidu.com") ؛ // نفس التعيين () ، ولكن لن يتم إضافة العنوان الجديد إلى كومة تاريخ المتصفح ، و site.reload (true | false) ؛ // إعادة تحميل الصفحة الحالية ، إذا كانت خاطئة ، فسيتم تحميلها بشكل زائد من ذاكرة التخزين المؤقت للمتصفح ، وإذا كان صحيحًا ، فسيتم تحميله من جانب الخادم ، والافتراضي كاذبكائن المستكشف
كائن "Navigator`: يحتوي على الكثير من المعلومات حول متصفحات الويب ، وهو أمر مفيد جدًا في اكتشاف المتصفحات وأنظمة التشغيل. يمكن أيضًا الرجوع إليها بواسطة window.navigator `navigator.appcodename` // سلسلة اسم رمز المتصفح تمثل navigator.appname // سلسلة المتصفح الرسمي تمثل navigator.appversion // ممكّن ، إرجاع صحيح ، وإلا ، إرجاع false navigator.platform // سلسلة من النظام الأساسي للكمبيوتر حيث يوجد المتصفح يمثل navigator.plugins
كائن الشاشة
كائن الشاشة: يستخدم للحصول على بعض المعلومات حول شاشة المستخدم. يمكنك أيضًا الرجوع إليها باستخدام window.screen.width/height // عرض وارتفاع الشاشة ، بالبكسل ، screen.availwidth/availheight // عرض وارتفاع الشاشة التي يمكن للنافذة استخدامها ، في البكسل ، screen.colordepth // عدد الأجزاء من اللون المستخدم من قبل المستخدم ، ومعظم الأنظمة باستخدام 32-bit. Window.Resizeto (screen.availwidth ، screen.availheight) ؛ // املأ شاشة المستخدم
طريقة كائن النافذة
رسم تخطيطي للعلاقة الهيكلية بين BOM و DOM
خريطة العقل كائن Windows