الطبقات HTML في JS

عند قراءة متصفح HTML DOM يولد نموذج. ومع ذلك، فإن معظم HTML-سمات القياسية هي خصائص الكائنات منها.

على سبيل المثال، إذا كان العلامة تبدو ، ثم الكائن هو خاصية body.id = "page".

ولكن هذا التحول - وليس واحد الى واحد. هناك حالات حيث سمة يحتوي على قيمة واحدة، والملكية - على حد سواء. ويحدث أيضا أن السمة، ولم يتم إنشاء خصائص بنفس الاسم.

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

رأينا سابقا بعض العقارات المبنية في DOM عقدة. ولكن، من الناحية الفنية، لا أحد منا لا يقتصر.

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

على سبيل المثال، فإننا سنضع في document.bodyخاصية جديدة، والكتابة في موضوع ما يلي:

يمكنك أيضا إضافة ميزة جديدة:

الخصائص المخصصة وطرق مرئية فقط في جافا سكريبت ولا يؤثر على عرض للعلامة المقابلة.

دعونا نلاحظ، والعرف DOM-خصائص:

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

عناصر DOM، من ناحية أخرى، تتوافق مع HTML-العلامات التي لديها سمات النص.

بالطبع، نحن هنا فقط عن العقد، والعناصر، وليس عن النص العقد أو تعليقات.

يتم تنفيذ الوصول إلى سمات باستخدام الأساليب القياسية:

  • elem.hasAttribute(name) - الشيكات للسمة
  • elem.getAttribute(name) - احصل على قيمة سمة
  • elem.setAttribute(name, value) - السمة مجموعات
  • elem.removeAttribute(name) - يزيل السمة

هذه الطرق تعمل مع القيمة في HTML.

أيضا، كل سمات يمكن الحصول عليها عن طريق استخدام خاصية elem.attributesيحتوي على مجموعة من نوع الزائفة وجوه ATTR.

على عكس الخصائص والصفات:

  • هم دائما السلاسل.
  • اسمها لا لحالة حساسة (انها HTML)
  • ينظر في innerHTML(باستثناء IE القديمة)

النظر في الخلافات بين DOM-خصائص وسمات سبيل المثال HTML رمز:



يوضح المثال التالي سمات مجموعات وخصائصها.





عند تشغيل التعليمات البرمجية أعلاه ملاحظة

  1. getAttribute('About')- الحرف الأول من اسم السمة Aboutهو مكتوب في حالة العلوي، كما هو الحال في HTML - في القاع، ولكن لا يهم، لأن الأسماء حساسة لحالة الأحرف.
  2. نحن يمكن الكتابة إلى السمة أي قيمة، ولكن سيتم تحويلها إلى سلسلة. سيتم تحويل الكائنات تلقائيا.
  3. بعد إضافة سمة يمكن أن ينظر في innerHTMLهذا العنصر.
  4. جمع attributesيحتوي على كافة الصفات في الكائنات مع خصائص nameو value.

عندما يقرأ متصفح HTML DOM ويخلق نموذج، فإنه يخلق خصائص كل معيار الصفات.

على سبيل المثال، خصائص العلامة 'A'صفت في مواصفات DOM: HTMLAnchorElement.

على سبيل المثال، لديها خاصية "href". وبالإضافة إلى ذلك، فقد "id"الخصائص الأخرى التي هي مشتركة بين جميع العناصر التي تم وصفها في مواصفات في HTMLElement.

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

النظر في بعض الأمثلة.

تزامن لا يضمن نفس القيم في الصفات والخصائص.

اقرأ المزيد:   الخط برنامج MAC OS

على سبيل المثال، نرى ما سيحدث مع السمة "href"عند تغيير خصائص:

وذلك لأن السمة قد تكون وجدت، والملكية href، وفقا لمواصفات W3C، يجب أن يكون كاملا حسب المرجع.

لذلك، إذا كنا نريد أن بالضبط في HTML، عليك أن تذهب من خلال السمة.

السمة تغيير بعض خصائص التحديثات. ولكن هذا هو الاستثناء وليس القاعدة.

تزامن الأكثر شيوعا - واحدة من جانب و: العقار يعتمد على سمة، ولكن ليس العكس.

على سبيل المثال، عند تغيير خصائص input.valueالسمة input.getAttribute('value')لا يغير:

وهذا يعني أن التغيير في DOM الملكية valueسمة لا يتأثر، فإنه لا يزال هو نفسه.

ولكن تغيير السمة بتحديث الملكية:

هذه الميزة يمكن أن تكون لطيفة للاستخدام.

اتضح أن السمة input.getAttribute('value')بتخزين قيمة (الأولي) الأصلي حتى بعد أن ملأ المستعمل في الميدان، ويتم تغيير الخاصية.

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

السمة "class"يتوافق مع الملكية className.

لأن كلمة "class"هي كلمة محجوزة في جافا سكريبت هو، أن عند تصميم DOM قررت أن الخاصية المقابلة سوف يطلق className.

على سبيل المثال:

وبالمناسبة، هناك سمات أخرى التي تسمى بشكل مختلف من الممتلكات. على سبيل المثال، السمة for( ) يناظر اسم الخاصية htmlFor.

السمة class- هي فريدة من نوعها. وهو يقابل قدر لخاصيتين!

العمل مع الطبقات مثل سلسلة غير مريحة. لذلك، بالإضافة className، في المتصفحات الحديثة لديها ميزة classList.

الملكية classList- كائن العمل مع الطبقات.

معتمد في IE منذ IE10، ولكن يمكن أن يحتذى في IE8 +، وربط classList.js المصغرة المكتبة.

الأساليب classList:

  • elem.classList.contains("class")- عوائد true/false، اعتمادا على ما إذا كانت هناك فئة عنصر class.
  • elem.classList.add/remove("class") - إضافة / إزالة الطبقة class
  • elem.classList.toggle("class")- إذا كانت فئة classغير موجودة، إضافته، إذا كان هناك - يزيل.

وبالإضافة إلى ذلك، فمن الممكن لفرز من خلال الطبقات forكما classList- الزائفة مجموعة.

على سبيل المثال:

كل عنصر يحتوي على مجموعة من الميزات القياسية، مثل أنه سيكون href، nameولكن بالنسبة لها أن تكون src، altوهلم جرا.

مجموعة المحدد من الميزات المذكورة في المعيار، وعادة ما تكون أكثر أو أقل حضورا، إذا كان لنا أن استخدام HTML، الخصائص التي يمكن أن يكون، وماذا - لا.

لم يتم إنشاء DOM الملكية للسمات مخصصة.

على سبيل المثال:

فإن المنشأة هي المعيار إلا إذا تم وصفها في المعيار لهذا العنصر.

وهذا هو، إذا قمت بتعيين عنصر سمة href، الخاصية img.hrefهذا يبدو. كما ومع ذلك، وإذا قمت بتعيين صلة السمة alt:

وتستخدم سمات مخصصة في بعض الأحيان لCSS.

في المثال التالي لإظهار "حالة الطلب" يستخدم السمة order-state:

لماذا السمة؟ لا يمكن أن قمتم به الطبقات .order-state-new، .order-state-pending، order-state-canceled؟

بالطبع يمكنك، ولكن التلاعب سمة من جافا سكريبت أسهل بكثير.

على سبيل المثال، إذا كنت بحاجة إلى إلغاء النظام، بغض النظر عن حالة هو الآن - أنه سيجعل رمز:

لفئات - الحاجة إلى معرفة ما الدرجة هو الآن في النظام. وبعد ذلك يمكن إزالة الطبقة القديمة، ووضع واحد جديد:

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

وببساطة، فإن قيمة السمة - قيمة الدرجة سلسلة التعسفية - انه هو 'أو' لا '، لذلك فمن الطبيعي أن سمات "قوية" و هي الطبقات أكثر ملاءمة في JS وفي CSS.

اقرأ المزيد:   NOD32 خادم تحديث 5

مع مساعدة من سمات مخصصة يمكن تعيينها إلى عنصر البيانات التي سوف تكون متاحة في جافا سكريبت.

عادة، ويتم ذلك بمساعدة من الصفات مع الأسماء التي تبدأ data-، على سبيل المثال:

HTML5 مستوى يسمح على وجه التحديد سمات data-*وتحتفظ بها لبيانات المستخدم.

في جميع المتصفحات باستثناء IE10-، هذه الصفات يمكن الوصول ليس فقط إلى الصفات، ولكن أيضا إلى الخصائص، مع خصائص خاصة dataset:

انتبه - اسم data-user-locationتحولت إلى dataset.userLocation. يتم تحويل الواصلة إلى بريد إلكتروني رأس المال.

لالمتصفحات القديمة سمات الحديثة تحتاج أحيانا polifille. وكقاعدة عامة، ويشمل هذا polifill ليس فقط جافا سكريبت، ولكن وCSS.

هذه السمة يجب إخفاء العنصر، والعمل هو بسيط جدا، لتقديم الدعم لها في HTML يكفي هذا CSS:

إذا واجهت سبيل المثال IE11- أعلاه،