من السهل خلط السمة وخاصية عنصر DOM معًا ولا يمكن تمييزها. الاثنان أشياء مختلفة ، لكن الاثنين مرتبطان ارتباطًا وثيقًا. كثير من الأصدقاء الجدد ، بمن فيهم أنا في الماضي ، لا يفهمون ذلك.
تتم ترجمة السمة إلى المصطلح الصيني "خصائص" ، ويتم ترجمة الممتلكات إلى المصطلح الصيني "السمة". من المعنى الحرفي للصينيين ، هناك بالفعل اختلاف بسيط. لنتحدث عن السمة أولاً.
السمة هي عقدة ميزة. يحتوي كل عنصر DOM على سمة سمات السمات المقابلة لتخزين جميع عقد السمات. السمات هي حاوية فئة صفيف. أن تكون دقيقًا ، فهو نامنوديمي. باختصار ، إنها حاوية مشابهة لصفيف ولكن ليس تمامًا مثل الصفيف. يخزن كل فهرس رقمي للسمات عقدة سمة في شكل زوج قيمة اسم (name = "value").
انسخ الرمز على النحو التالي: <div id = "box" gameID = "880"> Hello </iv>
يتضمن رمز HTML لعنصر DIV أعلاه الفصل والمعرف و GameID المخصص. يتم تخزين هذه الميزات في سمات ، على غرار النموذج التالي:
انسخ الرمز كما يلي: [، id = "box" ، gameid = "880"]
يمكنك الوصول إلى عقدة السمة مثل هذا:
نسخة الكود كما يلي:
var elem = document.getElementById ('box') ؛
console.log (elem.attributes [0] .Name) ؛ // فصل
console.log (elem.attributes [0] .value) ؛ // صندوق
ومع ذلك ، فإن IE6-7 يخزن العديد من الأشياء في السمات ، وطريقة الوصول أعلاه تختلف عن نتائج إرجاع المتصفح القياسي. عادة ، تحتاج إلى الحصول على عقدة سمة واستخدام طريقة getAttribute مباشرة:
انسخ الرمز كما يلي: console.log (elem.getAttribute ('GameId')) ؛ // 880
لتعيين عقدة سمة لاستخدام طريقة setAttribut
نسخة الكود كما يلي: elem.setattribute ('testattr' ، 'testval') ؛
console.log (Elem.RemoVeatTribute ('GameId')) ؛ // غير محدد
سيتم تحديث السمات ديناميكيًا عند إضافة عقد السمات أو إزالتها.
الخاصية هي خاصية. إذا تم اعتبار عنصر DOM ككائن كائن عادي ، فإن الخاصية هي خاصية مخزنة في الكائن في شكل زوج القيمة (name = "value"). من الأسهل بكثير إضافة وحذف الخصائص ، ولا يختلف عن الأشياء العادية:
نسخة الكود كما يلي:
elem.gameid = 880 ؛ // يضيف
console.log (elem.gameid) // get
حذف elem.gameid // حذف
السبب في سهولة الخلط بين السمة والخاصية هو أن العديد من عقد السمات لها سمة خاصية مقابلة ، مثل المعرف وفئة عنصر div أعلاه هما السمات والخصائص المقابلة ، والتي يمكن الوصول إليها وتعديلها بغض النظر عن الطريقة المستخدمة.
نسخة الكود كما يلي:
console.log (elem.getAttribute ('id')) ؛ // صندوق
console.log (elem.id) ؛ // صندوق
elem.id = 'hello' ؛
console.log (elem.getAttribute ('id')) ؛ // مرحبًا
ولكن بالنسبة لعقد السمة المخصصة أو الخصائص المخصصة ، لا علاقة للثلاثين ببعضهما البعض.
نسخة الكود كما يلي:
console.log (elem.getattribute ('gameid')) ؛ // 880
console.log (elem.gameid) ؛ // غير محدد
elem.areaid = '900' ؛
console.log (elem.getAttribute ('areaid')) // null
بالنسبة لـ IE6-7 ، لا يوجد تمييز بين السمة والممتلكات:
نسخة الكود كما يلي:
console.log (elem.getattribute ('gameid')) ؛ // 880
console.log (elem.gameid) ؛ // 880
elem.areaid = '900' ؛
console.log (elem.getattribute ('areaid')) // 900
ربما يقع العديد من المبتدئين في هذه الحفرة بسهولة.
بعض العقد السمة الشائعة لعناصر DOM لها سمات خاصية مقابلة. ما هو أكثر خصوصية هو بعض الخصائص مع قيمة نوع منطقي ، مثل بعض عناصر النماذج:
نسخة الكود كما يلي:
<type type = "radio" checked = "checked" id = "Raido">
var radio = document.getElementById ('radio') ؛
console.log (radio.getAttribute ('check')) ؛ // فحص
console.log (Radio.checked) ؛ // حقيقي
بالنسبة لعقد السمات الخاصة هذه ، فقط في حالة وجود هذه العقدة ، تكون قيمة الخاصية المقابلة صحيحة ، مثل:
نسخة الكود كما يلي:
<type type = "radio" checked = "hone" id = "Raido">
var radio = document.getElementById ('radio') ؛
console.log (radio.getAttribute ('check')) ؛ // أي شئ
console.log (Radio.checked) ؛ // حقيقي
أخيرًا ، من أجل التمييز بشكل أفضل بين السمة والممتلكات ، يمكن تلخيصها بشكل أساسي أن عقد السمات مرئية في رمز HTML ، والخاصية مجرد سمة زوج عادية قيمة الأسماء.
نسخة الكود كما يلي:
// كلا GameID و ID هي العقد السمة
// يمكن أيضًا الوصول إلى المعرف وتعديله من خلال الممتلكات
<Div GameID = "880" id = "box"> Hello </div>
// areaid هو مجرد خاصية
elem.areaid = 900 ؛