سيغطي الدرس بداية الموضوع: نموذج كائن المستند (javaScript DOM) هو أساس HTML الديناميكي ، وستتم دراسة طرق الوصول إلى الكائنات وكيفية التعامل مع أحداث جافا سكريبت
- عموما شيءهو نوع بيانات مركب يجمع العديد من القيم في وحدة نمطية مشتركة ويسمح لك بتخزين واسترداد القيم عند الطلب بأسمائها.
- يوجد في جافا سكريبت شيء مثل DOM - طراز كائن المستند- نموذج كائن صفحة الويب (صفحات html).
- علامات المستند أو ، كما يقولون ، عقد المستند هي كائناته.
في وقت سابق بدأنا بالفعل في التعرف على المفهوم في جافا سكريبت.
لنلق نظرة على الرسم التخطيطي التسلسل الهرمي للكائنات في جافا سكريبت، وأين يوجد كائن المستند الذي تمت مناقشته في هذا الموضوع في التسلسل الهرمي.
عنصر البرنامج النصي له سمات:
مثال:
خصائص وسمات كائن المستند في جافا سكريبت
يمثل كائن المستند صفحة ويب.
الأهمية:للوصول إلى خصائص وأساليب كائن في جافا سكريبت ، كما هو الحال مع الكائنات الأخرى ، تم استخدام تدوين النقطة:
أولئك. أولاً ، يتم كتابة الكائن نفسه ، ثم تتم الإشارة إلى خصائصه أو صفته أو أسلوبه من خلال فترة وبدون مسافات
object.property object.attribute object.method ()لنفكر في مثال:
مثال:دع مستند html يحتوي على علامة
ونمط css المعرّف لها (حتى نمطين ، يكون الثاني مفيدًا للمهمة):
ضروري:
- تعيين خاصية جديدة للكائن ، وتعيين قيمة لها وعرض هذه القيمة ؛
- عرض قيمة سمة كائن ؛
- تغيير قيمة سمة كائن.
دعنا نكمل المهمة بالترتيب:
✍ الحل:
نظرًا لأن هذه لغة جافا سكريبت ، يمكن اختراع كائن وتعيين أي خاصية بأي قيمة. لكن أولاً ، دعنا نصل إلى الكائن (ستتم مناقشة الوصول إلى الكائن بالتفصيل لاحقًا في هذا الدرس):
// الوصول إلى الكائن عن طريق معرف var element = document.getElementById ("MyElem") ؛ element.myProperty = 5 ؛ // تعيين تنبيه خاصية (element.myProperty) ؛ // عرض في مربع الحوار
المهمة التالية مرتبطة بسمة كائن. سمة الكائنهي سمات الوسم. أولئك. في حالتنا هناك نوعان: سمة class ذات قيمة صغيرة وسمة id. سنعمل مع سمة الطبقة.
الآن دعنا نضيف كود جافا سكريبت لعرض قيمة سمة كائننا. يجب تحديد موقع الرمز بعد، بعدماالعلامات الرئيسية:
// الوصول إلى الكائن عن طريق معرف var element = document.getElementById ("MyElem") ؛ تنبيه (element.getAttribute ("class")) ؛ // عرض في مربع الحوار
والمهمة الأخيرة: تغيير قيمة السمة. لهذا قمنا بإعداد أسلوب "كبير"... دعنا نستبدل قيمة سمة class بهذا النمط:
// الوصول إلى الكائن عن طريق معرف var element = document.getElementById ("MyElem") ؛ element.setAttribute ("class"، "big")؛
نتيجة لذلك ، سيصبح عنصرنا أكبر ولونًا باللون الأزرق (فئة كبيرة).
الآن دعنا نلقي نظرة فاحصة على الطرق المستخدمة في المثال للعمل مع السمات.
طرق السمات في JavaScript
يمكن إضافة السمات وإزالتها وتغييرها. هناك طرق خاصة لهذا:
- إضافة سمة (تحديد قيمة جديدة لها):
- التحقق من وجود سمة معينة:
getAttribute (سمة)
removeAttribute (سمة)
طرق مختلفة للعمل مع السمات
مثال:اطبع قيمة سمة القيمة في كتلة النص.
✍ الحل:
- دعونا نحصل على كتلة نصية:
- دعنا نفكر في عدة طرق للحصول على قيمة سمة (استخدم طريقة alert () للعرض):
var elem = document.getElementById ("MyElem") ؛ var x = "value" ؛
| elem.getAttribute ("القيمة") |
elem.getAttribute ("القيمة")
2.تدوين النقطة:
| السمات. القيمة |
elem.attributes.value
3.تدوين القوس:
تعيين قيم السماتأيضًا بعدة طرق:
var x = "key" ؛ // المفتاح هو اسم السمة ، فالقيمة هي قيمة السمة // 1. elem.setAttribute ("key"، "val") // 2. elem.attributes.key = "val" // 3. elem.attributes ["key"] = "val" // 4. elem.setAttribute (x، "val")
خصائص عنصر الجسم
من خلال كائن المستند ، يمكنك الرجوع إلى نص المستند - علامة النص الأساسي - مع بعض خصائصه المفيدة.
على سبيل المثال ، تحتوي علامة النص الأساسي على خاصيتين: عرض وارتفاع نافذة العميل:
document.body.clientHeight - ارتفاع نافذة العميل
document.body.clientWidth - عرض نافذة العميل
لكن الشيء الأكثر أهمية ، كما تعلمنا بالفعل ، هو أنه من خلال كائن المستند ، من خلال طرق خاصة ، يتم الوصول إلى جميع عناصر الصفحة ، أي العلامات ،.
الأهمية:مع هذا النوع من الإشارة إلى علامات الصفحة ، يجب أن يكون البرنامج النصي في نهاية شجرة العناصر ، قبل إغلاق النص الأساسي! نظرًا لأنه بحلول الوقت الذي يتم فيه تنفيذ البرنامج النصي ، يجب أن يتم بالفعل "رسم" جميع العناصر بواسطة المتصفح الموجود على الشاشة
الوظيفة js8_1... عرض رسالة حول حجم نافذة المتصفح: على سبيل المثال ، "أبعاد نافذة المتصفح 600 × 400"
الوصول إلى عناصر المستند في جافا سكريبت
هناك عدة خيارات للوصول إلى الأشياء أو البحث عنها:
- البحث عن طريق معرف(أو طريقة getElementById) ، تُرجع عنصرًا محددًا
- البحث عن طريق اسم العلامة(أو طريقة getElementsByTagName) ، تُرجع مصفوفة من العناصر
- البحث بالاسم سمة(أو طريقة getElementsByName) ، تُرجع مصفوفة من العناصر
- من خلال العناصر الأم(احصل على جميع الأحفاد)
دعنا نفكر في كل خيار بمزيد من التفصيل.
- الوصول إلى عنصر من خلال سمة معرفه
بناء الجملة: document.getElementById (معرف)
تقوم طريقة getElementById () بإرجاع العنصر نفسه ، والذي يمكن استخدامه بعد ذلك للوصول إلى البيانات
مثال:تحتوي الصفحة على حقل نص بالسمة id = "cake":
...
ضروري
✍ الحل:
تنبيه (document.getElementById ("cake"). value) ؛ // إرجاع "عدد الكعك"
يمكنك أن تفعل الشيء نفسه عن طريق تنفيذ استدعاء الكائن من خلال متغير:
var a = document.getElementById ("cake") ؛ تنبيه (a.value) ؛ // طباعة قيمة سمة القيمة ، أي نص "عدد الكعك"
الأهمية:يجب وضع النص بعد العلامة!
بناء الجملة:
document.getElementsByTagName (الاسم) ؛
مثال:تحتوي الصفحة على حقل نصي (علامة إدخال) بسمة قيمة:
...
ضروري: طباعة قيمة سمة القيمة الخاصة بها
تعمل طريقة getElementsByTagName من خلال متغير على تنظيم الوصول إلى جميع عناصر الإدخال (أي لمجموعة من العناصر input) ، حتى لو كان هذا العنصر هو العنصر الوحيد في الصفحة. للإشارة إلى عنصر معين ، على سبيل المثال إلى العنصر الأول ، فإننا نشير إلى فهرسه (تبدأ المصفوفة من فهرس الصفر).
✍ الحل:
- نشير إلى عنصر محدد بالفهرس:
var a = document.getElementsByTagName ("input") ؛ تنبيه (a.value) ؛ // إرجاع "عدد الكعك"
بناء الجملة:
document.getElementsByName (الاسم) ؛
إرجاع أسلوب getElementsByName ("...") مجموعة من الأشياء، حيث تكون سمة الاسم مساوية للقيمة المحددة كمعامل أسلوب. إذا كان هناك عنصر واحد فقط على الصفحة ، فستظل الطريقة تُرجع مصفوفة (مع عنصر واحد فقط).
مثال:لنفترض أن هناك عنصرًا في المستند:
var element = document.getElementsByName ("MyElem") ؛ تنبيه (element.value) ؛
في هذا المثال ، يوجد عنصر واحد فقط ، ولكن يتم الإشارة إلى العنصر صفر في المصفوفة.
الأهمية: تعمل الطريقة فقط مع تلك العناصر التي يتم توفير سمة الاسم لها صراحةً في المواصفات.: هذه هي شكل العلامات ، الإدخال ، a ، التحديد ، textarea وعدد آخر ، أكثر ندرة.
لن تعمل طريقة document.getElementsByName مع عناصر أخرى مثل divs و p وما إلى ذلك.
الوصول إلى الأحفاد في جافا سكريبتيحدث من خلال خاصية childNodes. تنتمي الخاصية إلى الكائن الأصل.
document.getElementById (roditel) .childNodes ؛ document.getElementById (roditel) .childNodes ؛
ضع في اعتبارك مثالًا يتم فيه وضع علامات الصورة في حاوية - علامة div. وبالتالي ، فإن علامة div هي أصل بيانات الصورة ، وعلامات img نفسها ، على التوالي ، هي أبناء علامة div:
| <معرف div = "div_for_img"> <img src = "pic1.jpg" /> <img src = "pic2.jpg" /> <img src = "pic3.jpg" /> <img src = "pic4.jpg" /> </ div> |
الآن دعنا نعرض قيم عناصر المصفوفة مع أحفادها في النافذة المشروطة ، أي علامات img:
var myDiv = document.getElementById ("div_for_img") ؛ // الرجوع إلى الحاوية الرئيسية var childMas = myDiv.childNodes ؛ // مجموعة أحفاد لـ (var i = 0 ؛ i< childMas.length;i++){ alert(childMas[i].src); }
لاحظ أنه من الملائم استخدام حلقة لتكرار عناصر المصفوفة الفرعية. أولئك. في مثالنا نحصل على حلقة:
| ... لـ (var a in childMas) (تنبيه (childMas [a] .src) ؛) |
لـ (var a in childMas) (تنبيه (childMas [a] .src) ؛)
طرق أخرى سننظر فيها على سبيل المثال:
| <الجسم> <اسم النموذج = "و"> <نوع الإدخال = "text" id = "t"> <نوع الإدخال = "button" id = "b" value = "(! LANG: button" > !} <حدد id = "s" name = "ss"> <معرف الخيار = "o1"> 1</ خيار> <معرف الخيار = "o2"> 3</ خيار> <معرف الخيار = "o3"> 4</ خيار> </ حدد> </ شكل> |
وصول:
| ... // موصّلات العناصر غير المرغوب فيها والقديمة:تنبيه (document.forms [0] .name) ؛ // f تنبيه (document.forms [0] .elements [0] .type) ؛ // نص تنبيه (document.forms [0] .elements [2] .options [1] .id) ؛ // o2 alert (document.f .b .type) ؛ // زر التنبيه (document.f .s .name) ؛ // ss alert (document.f .s .options [1] .id) ؛ // o2 // طرق الوصول المفضلة للعناصرتنبيه (document.getElementById ("t") .type) ؛ // نص تنبيه (document.getElementById ("s") .name) ؛ // ss alert (document.getElementById ("s") .options [1] .id) ؛ // 02 تنبيه (document.getElementById ("o3") .text) ؛ // 4 ... |
... // موصّلات العناصر غير المرغوب فيها والمتقادمة: التنبيه (document.forms.name) ؛ // f التنبيه (document.forms.elements.type) ؛ // تنبيه نصي (document.forms.elements.options.id) ؛ // o2 alert (document.f.b.type) ؛ // زر التنبيه (document.f.s.name) ؛ // ss alert (document.f.s.options.id) ؛ // o2 // تنبيه طرق الوصول المفضل (document.getElementById ("t"). type) ؛ // نص تنبيه (document.getElementById ("s"). name) ؛ // ss alert (document.getElementById ("s"). options.id) ؛ // 02 تنبيه (document.getElementById ("o3"). Text) ؛ // 4 ...
مثال:في وثيقة html إنشاء زر ومربع نص. استخدام برنامج نصي لتلوين خلفية الزر (خاصية style.backgroundColor للزر) وعرض التسمية التوضيحية "مهلا!"في مربع النص (تقدير القيمة).
كود Html:
document.getElementById ("t1"). value = "(! LANG: Hello!"; document.getElementById("b1").style.backgroundColor = "red";!}
الخيار 2:
| document.getElementById ("t1") .setAttribute ("value"، "Hello!")؛ document.getElementById ("b1") .style .backgroundColor = "red"؛ |
document.getElementById ("t1"). setAttribute ("value"، "Hello!")؛ document.getElementById ("b1"). style.backgroundColor = "red"؛
Js8_2.قم بإنشاء علامات مربع نص وفقًا للصورة الموجودة في الصورة. قم بتعيينها إلى قيم سمة المعرف المقابلة (الموضحة في الشكل). أضف القيمة "0" لجميع الحقول الرقمية (بافتراض القيم الرقمية) باستخدام البرنامج النصي 
التحقق من إدخال بيانات النموذج بشكل صحيح
هل الحقل فارغ؟
البيانات التي يدخلها المستخدمون لا يمكن الوثوق بها. من غير المعقول افتراض أن المستخدمين سيتحققون من البيانات عند إدخالها. هذا يعني أنك بحاجة إلى استخدام جافا سكريبت لهذا الغرض.
لأجل أن تفحص هل حقل النص فارغ(على سبيل المثال ، بعد أن يملأ المستخدم بيانات الاستبيان) ، يجب عليك الرجوع إلى خاصية value. إذا كانت قيمة الخاصية عبارة عن سلسلة فارغة ("") ، فمن الضروري إخطار المستخدم بهذا الأمر بطريقة أو بأخرى.
if (document.getElementById ("name"). value == "") (بعض الإجراءات ، على سبيل المثال ، عرض رسالة تطلب منك ملء الحقل) ؛
بالإضافة إلى ذلك ، يمكنك الاستغناء عن البرنامج النصي. تحتوي علامة الإدخال الخاصة بمربع النص على سمة نمط. قيمته هي تعبير عادي للتحقق من صحة البيانات في هذا الحقل النصي للنموذج. إذا كانت السمة موجودة نمطثم لن يتم إرسال النموذج حتى يتم ملء مربع النص هذا بشكل صحيح.
على سبيل المثال ، للتحقق من ترك حقل فارغًا:
نص بدلاً من القيمة الرقمية: دالة isNaN
إذا كان المجال يقترح إدخال رقمي، وبدلاً من ذلك يقوم المستخدم بإدخال نص ، فيجب عليك استخدام وظيفة isNaN (من اللغة الإنجليزية. "أليس هو رقم؟") ، الذي يتحقق من نوع بيانات الإدخال ويعيد صحيحًا إذا تم إدخال بيانات نصية بدلاً من البيانات الرقمية.
الذي - التي. إذا تم إرجاع true ، فمن الضروري إخطار المستخدم لإدخال التنسيق الصحيح ، أي عدد.
if (isNaN (document.getElementById ("minutes"). value)) (تنبيه يسأل عن بيانات رقمية) ؛
إعطاء صفحة بالعناصر المراد ملؤها: 
مقتطف من كود html:
| 1 2 3 4 5 6 7 8 9 10 11 12 | <شكل>اسم:<نوع الإدخال = "text" id = "name"> عدد الكعك:<نوع الإدخال = "text" id = "donuts"> الدقائق:<نوع الإدخال = "text" id = "minutes"> المجموع الفرعي:<نوع الإدخال = "text" id = "poditog"> ضريبة:<نوع الإدخال = "text" id = "tax"> حصيلة:<نوع الإدخال = "text" id = "itog"> <نوع الإدخال = "إرسال" القيمة = "(! LANG: الطلب" onclick = "placeOrder();" > !} </ شكل> <نوع البرنامج النصي = "text / javascript"> ... </ النصي> |
ضروري:
أكمل الفراغات في مقتطف الشفرة أدناه للتحقق من ملء حقلي النص بشكل صحيح: اسم(معرف = "الاسم") و الدقائق(المعرف = "دقائق"). استخدم الشيك لترك الحقل فارغًا ("") والصيغة الصحيحة لملء حقل رقمي (isNaN).
* قم بإجراء المهمة أيضًا باستخدام سمة النمط لحقول النص باستخدام.
جزء من البرنامج النصي:
يتم استخدام الكود لبناء الشروط المعقدة التي تم تمريرها مسبقًا.
مفهوم جديد لك هو استدعاء دالة كمعالج لحدث زر:
onclick = "placeOrder () ؛"
عند النقر فوق الزر ، سيتم استدعاء وظيفة placeOrder ()
يمكنك إنشاء ارتباط مخصص الارتباطاتوالتي ستتحقق من قيمة منطقية محددة يمكن ملاحظتها قبل إضافة سمات أم لا. انظر هذا المثال:
Ko.bindingHandlers.attrIf = (update: function (element، valueAccessor، allBindingsAccessor) (var h = ko.utils.unwrapObservable (valueAccessor ())؛ var show = ko.utils.unwrapObservable (h._if) ؛ if (show) (ko.bindingHandlers.attr.update (element، valueAccessor، allBindingsAccessor)؛) else (for (var k in h) (if (h.hasOwnProperty (k) && k.indexOf ("_")! == 0) ( $ (element) .removeAttr (k) ؛))))) ؛ حلقة الوصل
أتمنى لو كان بإمكاني الإجابة علىgbs فقط ، لكن لا يمكنني ذلك. سيكون الحل هو الحصول على عنصري HTML متطابقين ، أحدهما بسمة ، والآخر بدونه ، وشرط خروج المغلوب لإضافة أحدهما لمطابقة العنصر. كما أنني أدرك هذا التوقع المعتاد ، ولكن أي حل أكثر كفاءة؟
يدور هذا البرنامج التعليمي حول قراءة سمات العنصر وتعديلها في jQuery.
السمات هي زوج اسم / قيمة يتم تعيينه لعناصر في علامة. أمثلة السمات ( href, لقب, src, صف دراسي):
- Attr ()لقراءة وإضافة وتغيير السمات
- removeAttr ()لإزالة السمات
يشرح هذا الدرس كيفية استخدام التابعين attr () و removeAttr ().
توجد طرق jQuery خاصة للعمل مع فئات CSS ، والتي تم وصفها في برنامج تعليمي آخر. عند العمل في مشروع في jQuery ، يتعين عليك معالجة فئات CSS كثيرًا ، ويمكن أن تحتوي سمة class على أسماء فئات متعددة ، مما يجعل التعامل معها أكثر صعوبة من السمات الأخرى.
إذا كنت ستعمل مع قيم حقول الإدخال ، فمن الأفضل استخدام طريقة val () ، والتي لا توفر طريقة مبسطة للعمل مع سمة القيمة فحسب ، بل يمكنها أيضًا قراءة القيم وتعيينها في العناصر المختارة من القائمة المختارة.
قراءة قيمة السمة
قراءة قيمة سمة عنصر ما مباشرة. تحتاج فقط إلى استدعاء التابع attr () على كائن jQuery الذي يحتوي على العنصر ، وتمريره اسم السمة لقراءته. تُرجع الطريقة قيمة السمة:
// عرض قيمة السمة "href" لتنبيه عنصر #myLink ($ ("a # myLink"). Attr ("href"))؛
إذا احتوى كائن jQuery على عناصر متعددة ، فإن طريقة attr () تقرأ فقط قيم السمات للعنصر الأول في المجموعة.
تحديد قيم السمات
يمكن أيضًا استخدام طريقة attr () لإضافة قيم السمات أو تغييرها:
- إذا كانت السمة غير موجودفي العنصر ، سيكون مضافوسيتم تعيين القيمة المعطاة لها.
- إذا كانت السمة موجود أصلا، ستكون قيمتها محدثالقيمة المحددة.
توجد ثلاث طرق لاستخدام طريقة attr () لإضافة السمات أو تغييرها:
- يمكنك إضافة / تغيير السمات لأي عنصر (أو مجموعة من العناصر).
- يمكنك إضافة / تغيير العديد من السمات مرة واحدة لعنصر (أو عناصر) عن طريق تحديد خريطة لأسماء السمات والقيم.
- يمكنك إضافة / تغيير سمة واحدة ديناميكيًا لعناصر متعددة باستخدام وظيفة رد الاتصال.
تحديد سمة واحدة
لتعيين سمة عنصر أو تغييرها ، قم باستدعاء أسلوب attr () باسم السمة والقيمة. على سبيل المثال:
// غيّر قيمة السمة "href" لعنصر #myLink إلى "http://www.example.com/" // (إذا كانت السمة "href" غير موجودة ، فسيتم إنشاؤها تلقائيًا) $ ( "a # myLink"). attr ("href"، "http://www.example.com/")؛
من الممكن أيضًا تعيين نفس السمة لعناصر متعددة:
تعيين بعض السمات باستخدام الخريطة
يمكنك تعيين العديد من السمات في نفس الوقت لعنصر واحد أو أكثر باستخدام الخريطة. هذه قائمة بأزواج الاسم / القيمة التي تبدو كالتالي:
(الاسم 1: القيمة 1 ، الاسم 2: القيمة 2 ، ...)
يعيّن المثال التالي سمتين للعنصر img في نفس الوقت:
// تعيين السمتين "src" و "alt" لعنصر img #myPhoto $ ("img # myPhoto"). Attr (("src": "mypic.jpg"، "alt": "My Photo")) ؛
يمكنك أيضًا تعيين سمات لعناصر متعددة:
// تعيين سمات "src" و "alt" لجميع عناصر img $ ("img"). Attr (("src": "mypic.jpg"، "alt": "My Photo")) ؛
ضبط السمات باستخدام وظيفة رد الاتصال
بدلاً من تمرير قيم السمات إلى طريقة attr () ، يمكنك تمرير اسم وظيفة رد الاتصال. يتيح لك هذا تعيين قيم السمات ديناميكيًا لعناصر متعددة وفقًا لموضع العنصر أو قيمة السمة الحالية أو الخصائص الأخرى.
يجب أن تأخذ دالة الإرجاع وسيطين:
- فهرس موضع العنصر المحدد حاليًا في المجموعة (بدءًا من الصفر)
- قيمة السمة القديمة للعنصر المحدد حاليًا
يتم استخدام قيمة الإرجاع للدالة لتجاوز قيمة السمة.
بالإضافة إلى الموضع الحالي للعنصر والقيمة القديمة للسمة ، يمكن لوظيفتك الوصول إلى العنصر نفسه باستخدام هذه الكلمة الأساسية. بهذه الطريقة ، يمكنك الوصول إلى أي خاصية أو طريقة لعنصر من وظيفة رد الاتصال.
يستخدم المثال وظيفة رد الاتصال لإضافة سمة بديل لكل صورة على الصفحة بناءً على موضع الصورة وسمة src الخاصة بها:
بعد تشغيل الكود ، ستحتوي الصورة الأولى على سمة alt بالقيمة "الشكل 1: myphoto.jpg" ، وستحتوي الصورة الثانية على سمة alt بالقيمة "الشكل 2: yourphoto.jpg".
إزالة سمة
لإزالة سمة من عنصر ، قم باستدعاء طريقة removeAttr () ، وقم بتمرير اسم السمة المراد إزالتها. على سبيل المثال:
// إزالة سمة "العنوان" من عنصر #myLink $ ("a # myLink").
يمكنك أيضًا استدعاء طريقة removeAttr () على كائن jQuery يحتوي على عناصر متعددة. ستزيل طريقة removeAttr () السمة المحددة من جميع العناصر:
// إزالة سمة "العنوان" من كافة الروابط $ ("a") RemoveAttr ("title")؛
ملخص
تناول هذا الدرس قضايا التعامل مع سمات العنصر في jQuery:
- قراءة قيم السمات
- تحديد سمة واحدة
- تعيين عدة سمات مختلفة في نفس الوقت
- استخدام وظيفة رد الاتصال لتعيين قيم السمات ديناميكيًا في استنسل
- إزالة السمات من عنصر
في هذه المقالة ، سوف نتعرف على خصائص وسمات DOM ، وننظر في كيفية اختلافها وكيفية التعامل معها بشكل صحيح. دعنا نلقي نظرة على ماهية طرق JavaScript لإجراء عمليات على السمات.
كيف تختلف السمة عن خاصية DOM؟
السمات هي كيانات HTML يمكننا من خلالها إضافة بيانات محددة إلى عناصر في كود HTML.
عندما يطلب المتصفح صفحة معينة ، يتلقى كود مصدر HTML الخاص بها. بعد ذلك ، يوزع هذا الرمز ويبني DOM بناءً عليه. خلال هذه العملية يتم ترجمة سمات HTML للعناصر إلى خصائص DOM المقابلة.
على سبيل المثال ، سيقوم المستعرض ، عند قراءة سطر تعليمات HTML البرمجية التالي ، بإنشاء خصائص DOM التالية لهذا العنصر: id ، و className ، و src ، و alt.
يتم الوصول إلى هذه الخصائص في كود JavaScript كخصائص لكائن. الكائن هنا هو عقدة DOM (عنصر).
مثال نحصل فيه على قيم خصائص DOM للعنصر أعلاه ، ونطبع قيمها إلى وحدة التحكم:
// الحصول على العنصر var brandImg = document.querySelector ("# brand") ؛ // طباعة إلى وحدة التحكم قيم خصائص DOM الخاصة بوحدة التحكم في العنصر (brandImg.id) ؛ // "العلامة التجارية" console.log (brandImg.className) ؛ // "العلامة التجارية" console.log (brandImg.src) ؛ // "/logo.png" console.log (brandImg.alt) ؛ // "شعار الموقع"
لا تتطابق بعض أسماء خصائص DOM مع أسماء السمات. واحدة من هذه هي سمة الفئة. تتوافق هذه السمة مع className لخاصية DOM. يرجع هذا الاختلاف إلى حقيقة أن الفئة عبارة عن كلمة رئيسية في JavaScript ، وهي محجوزة ولا يمكن استخدامها. لهذا السبب ، قرر مطورو المعيار استخدام اسم آخر للمباراة ، والتي تم اختيارها باسم className.
هناك فارق بسيط آخر يتعلق بحقيقة أن ترجمة سمات HTML المحددة في التعليمات البرمجية المصدر للمستند إلى خصائص DOM لا تتم دائمًا على أساس فردي.
إذا كان العنصر يحتوي على سمة HTML غير قياسية ، فلن يتم إنشاء الخاصية المقابلة له في DOM.
الفرق الآخر هو أن قيم بعض سمات HTML وخصائص DOM المقابلة لها يمكن أن تكون مختلفة. أولئك. يمكن أن تحتوي السمة على قيمة واحدة ، ولكن يمكن أن يكون لخاصية DOM المنشأة منها قيمة أخرى.
تم فحص إحدى هذه السمات.
قيمة السمة المحددة في HTML ، في هذه الحالة ، هي سلسلة فارغة. لكن الخاصية المقابلة للسمة المعينة في DOM سيكون لها القيمة true. لأن وفقًا لقواعد المعيار ، لإثبات الصدق ، يكفي فقط ذكر هذه السمة في كود HTML ، ولا يهم القيمة التي ستكون لها.
في الوقت نفسه ، حتى لو لم نحدد في كود HTML السمة المحددة لعنصر الإدخال بنوع مربع الاختيار ، فسيستمر إنشاء الخاصية المحددة له في DOM ، لكنها ستكون مساوية للخطأ.
بالإضافة إلى ذلك ، يتيح لك JavaScript العمل مع السمات أيضًا. هناك طرق خاصة لهذا في واجهة برمجة تطبيقات DOM. ولكن يُنصح باستخدامها فقط عندما تحتاج حقًا إلى التعامل مع البيانات بهذه الطريقة.
في الوقت نفسه ، يجب أن تعرف أنه عندما نغير خاصية DOM لعنصر ما ، فإن السمة المقابلة تتغير أيضًا ، والعكس صحيح. لكن هذه العملية في المتصفحات لا تتم دائمًا بشكل فردي.
الاختلافات الرئيسية بين خصائص وسمات DOM هي:
- دائمًا ما تكون قيمة السمة سلسلة ، وقيمة خاصية DOM هي نوع بيانات محدد (ليس بالضرورة سلسلة) ؛
- اسم السمة غير حساس لحالة الأحرف ، وخصائص DOM حساسة لحالة الأحرف. أولئك. في كود HTML ، يمكننا ، على سبيل المثال ، كتابة سمة معرف HTML على هيئة معرف ، معرف ، إلخ. الأمر نفسه ينطبق على اسم السمة ، والتي نحددها في طرق JavaScript خاصة للعمل معها. لكن لا يمكننا الإشارة إلى خاصية DOM المقابلة إلا بالمعرف وليس بأي طريقة أخرى.
العمل مع خصائص DOM لعنصر
كما هو مذكور أعلاه ، يتم العمل مع خصائص العناصر في JavaScript كما هو الحال مع خصائص الكائنات.
ولكن من أجل الوصول إلى خاصية بعض العناصر ، يجب أن تحصل عليها أولاً. يمكنك الحصول على عنصر DOM في JavaScript ، على سبيل المثال ، باستخدام الأسلوب العام querySelector ، ومجموعة من عناصر DOM ، على سبيل المثال ، باستخدام querySelectorAll.
كمثال أولي ، ضع في اعتبارك عنصر HTML التالي:
بناءً عليه ، سنقوم بتحليل كيفية الحصول على خصائص DOM وتغييرها وإضافة خصائص جديدة.
قراءة قيم خصائص DOM:
// احصل على قيمة معرف خاصية DOM var alertId = alert.id ؛ // "alert" // احصل على قيمة الخاصية DOM className var alertClass = alert.className؛ // "alert-info" // احصل على قيمة DOM لخاصية العنوان var alertId = alert.title؛ // "نص تلميح الأداة ..."
تغيير قيم خصائص DOM:
// لتغيير قيمة خاصية DOM ، تحتاج فقط إلى تعيين قيمة جديدة alert.title = "(! LANG: نص جديد للموجه"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}
إضافة خصائص DOM:
Alert.lang = "ru" ؛ // تعيين الخاصية lang على "ru" alert.dir = "ltr" ؛ // تعيين خاصية dir على "ltr"
مثال سنطبع فيه إلى وحدة التحكم جميع قيم الفئات التي تحتوي عليها العناصر p على الصفحة:
Var الفقرات = document.querySelectorAll ("p") ؛ لـ (var i = 0، length = الفقرات الطول ؛ i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }
مثال سنقوم فيه بتعيين جميع العناصر مع فئة المحتوى الخاصية lang بالقيمة "ru":
محتويات Var = document.querySelectorAll (". Content") ؛ لـ (var i = 0 ، length = content.length ؛ أنا< length; i++) { contents[i].lang = "ru"; }
سمات العنصر وطرق العمل معهم
يتم تعيين السمات مبدئيًا في كود HTML. على الرغم من ارتباطهما ببعض الخصائص ، إلا أنهما ليسا نفس الشيء. في معظم الحالات ، يجب التعامل مع الخصائص والوصول إلى السمات فقط عندما تحتاج فعلاً إلى ذلك.
قيم السمات ، على عكس خصائص DOM ، كما هو مذكور أعلاه ، دائمًا ما تكون سلسلة.
تحتوي JavaScript على أربع طرق لإجراء عمليات البيانات الجدولية:
- .hasAttribute ("attribute_name") - يتحقق من وجود السمة المحددة على العنصر. إذا كان العنصر يحتوي على سمة محددة ، فإن هذه الطريقة تُرجع صحيحة ، وإلا - خطأ.
- .getAttribute ("attribute_name") - يحصل على قيمة السمة. إذا لم يكن للعنصر السمة المحددة ، فإن هذه الطريقة تُرجع سلسلة فارغة ("") أو خالية.
- .setAttribute ("attribute_name"، "attribute_value") - يضبط السمة المحددة بالقيمة المحددة للعنصر. إذا كان العنصر يحتوي على السمة المحددة ، فإن هذه الطريقة ستغير قيمتها ببساطة.
- .removeAttribute ("اسم_السمات") - يزيل السمة المحددة من العنصر.
لنلقِ نظرة على بعض الأمثلة.
مثال مثير للاهتمام مع سمة القيمة.
مثال مع سمة القيمة
دعنا نحصل على قيمة سمة القيمة وقيمة خاصية DOM:
// الحصول على قيمة سمة القيمة لاسم العنصر .getAttribute ("القيمة") ؛ // "Bob" // احصل على قيمة قيمة خاصية DOM name.value ؛ // "Bob" // حدّث قيمة سمة القيمة ، اضبطها على اسم قيمة جديد .setAttribute ("القيمة" ، "توم") ؛ // "Tom" // احصل على قيمة اسم قيمة خاصية DOM name.value ؛ // "توم"
من هذا المثال ، يمكنك أن ترى أنه عندما تتغير سمة القيمة ، يقوم المتصفح تلقائيًا بتغيير خاصية قيمة DOM وفقًا لذلك.
لنقم الآن بالعكس ، أي تغيير قيمة خاصية DOM والتحقق مما إذا كانت قيمة السمة تتغير:
// تعيين قيمة جديدة لقيمة خاصية DOM name.value = "(! LANG: John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}
من هذا المثال ، يمكنك أن ترى أن تغيير خاصية DOM لا يؤدي دائمًا إلى تغيير مناظر في السمة. أولئك. في هذه الحالة ، لا يؤدي تغيير قيمة خاصية DOM إلى تغيير السمة المقابلة.
سيحدث نفس الشيء عندما يقوم المستخدم بإدخال نص في هذا الحقل. ستحتوي قيمة خاصية DOM على القيمة الفعلية ، وستحتوي السمة المقابلة على القيمة الأصلية أو القيمة التي قمنا بتعيينها ، على سبيل المثال ، باستخدام طريقة setAttribute.
يوضح هذا المثال أنه من الأصح العمل دائمًا مع خصائص DOM ، ولا تحتاج إلى الوصول إلى السمة إلا عندما تكون ضرورية حقًا.
حتى عندما تحتاج إلى الحصول على القيمة الأولية التي قمنا بتعيينها في HTML ، يمكنك استخدام الخاصية. تسمى الخاصية التي تحتوي على القيمة الأولية لسمة القيمة defaultValue.
Name.defaultValue ؛ // توم
مثال آخر مثير للاهتمام ، ولكن الآن مع السمة href.
مثال مع سمة href
مثال نحتاج فيه إلى الحصول على قيمة الارتباط كما تم تعيينها في HTML.
في هذا المثال ، تحتوي السمة href وخاصية DOM href على قيم مختلفة. السمة href هي ما قمنا بتعيينه في الكود ، وخاصية DOM هي عنوان URL الكامل. يتم تحديد هذا التمييز من خلال المعيار الذي يجب أن يتطابق فيه المستعرض مع قيمة href مع عنوان URL الكامل.
لذلك ، إذا احتجنا إلى الحصول على ما هو موجود في السمة ، فلا يمكننا الاستغناء عن طريقة getAttribute في هذه الحالة.
أخيرًا ، دعنا نلقي نظرة على السمة المحددة.
مثال مع السمة المختارة
حدد مثال يوضح كيف يمكنك الحصول على قيمة الخيار المحدد:
مثال يوضح كيف يمكنك الحصول على قيم الخيار المحدد في عنصر تحديد:
طريقة أخرى للعمل مع السمات (خاصية السمات)
في JavaScript ، يحتوي كل عنصر على خاصية سمات يمكن استخدامها لاسترداد جميع سماته ككائن NamedNodeMap.
يمكن استخدام هذه الطريقة عندما تحتاج ، على سبيل المثال ، إلى تكرار جميع سمات العنصر.
يتم الوصول إلى سمة في هذه المجموعة من خلال فهرسها أو باستخدام طريقة العنصر. يتم احتساب السمات في هذه المجموعة من 0.
على سبيل المثال ، دعنا نعرض جميع سمات عنصر معين على وحدة التحكم:
أنا أحب جافا سكريبت
بجانب، يمكنك أيضًا العمل مع هذه المجموعة باستخدام الطرق التالية:
- .getNamedItem ("attribute_name") - يحصل على قيمة السمة المحددة (إذا كانت السمة المحددة غائبة عن العنصر ، فستكون النتيجة فارغة).
- .setNamedItem ("attribute_yzel") - تضيف سمة جديدة إلى عنصر أو تُحدِّث قيمة عنصر موجود. لإنشاء سمة ، يجب عليك استخدام طريقة document.createAttribute () ، والتي يجب أن تمرر اسم السمة كمعامل. بعد ذلك ، يجب تعيين قيمة السمة التي تم إنشاؤها باستخدام خاصية القيمة.
- .removeNamedItem ("اسم_السمات") - يزيل السمة المحددة من العنصر (إرجاع السمة التي تمت إزالتها كنتيجة).
مثال على التعامل مع السمات باستخدام طرق getNamedItem و setNamedItem و removeNamedItem:
أنا أحب جافا سكريبت
مهام
- اطبع إلى وحدة التحكم جميع عناصر المستند التي لها سمة id.
- أضف سمة العنوان إلى جميع الصور الموجودة على الصفحة إذا لم يكن لديها هذه السمة. عيّن قيمة السمة على قيمة سمة النص البديل.
يضبط قيمة السمة على العنصر المحدد. إذا كانت السمة موجودة بالفعل ، يتم تحديث القيمة ؛ وإلا يتم إضافة سمة جديدة بالاسم والقيمة المحددين.
بناء الجملة
عنصر.setAttribute ( اسم, القيمة);العوامل
اسم سلسلة DOM تحدد اسم السمة التي سيتم تعيين قيمتها. يتم تحويل اسم السمة تلقائيًا إلى جميع الأحرف الصغيرة عندما يتم استدعاء setAttribute () على عنصر HTML في مستند HTML. قيمة سلسلة DOM تحتوي على القيمة المراد تخصيصها للسمة. يتم تحويل أي قيمة غير سلسلة محددة تلقائيًا إلى سلسلة.تعتبر السمات المنطقية صحيحة إذا كانت "موجودة على العنصر على الإطلاق ، بغض النظر عن قيمتها الفعلية ؛ كقاعدة عامة ، يجب عليك تحديد السلسلة الفارغة (" ") في القيمة (يستخدم بعض الأشخاص اسم السمة ؛ هذا يعمل ولكنه غير قياسي). انظر أدناه للحصول على شرح عملي.
نظرًا لأنه يتم تحويل القيمة المحددة إلى سلسلة ، فإن تحديد القيمة "خالية" لا يؤدي بالضرورة إلى ما تتوقعه. وبدلاً من إزالة السمة أو تعيين قيمتها على أن تكون خالية ، فإنها تقوم بدلاً من ذلك بتعيين قيمة السمة إلى السلسلة "فارغة". إذا كنت ترغب في إزالة سمة ، اتصل بـ removeAttribute ().
قيمة الإرجاع
استثناءات
InvalidCharacterError يحتوي اسم السمة المحددة على حرف واحد أو أكثر وهي غير صالحة في أسماء السمات.مثال
في المثال التالي ، يتم استخدام setAttribute () لتعيين السمات على ملف.
لغة البرمجة
جافا سكريبت
var b = document.querySelector ("الزر") ؛ b.setAttribute ("الاسم" ، "helloButton") ؛ b.setAttribute ("معطل" ، "") ؛هذا يوضح شيئين:
- يُظهر الاستدعاء الأول لـ setAttribute () أعلاه تغيير قيمة سمة الاسم إلى "helloButton". يمكنك رؤية ذلك باستخدام فاحص صفحة المتصفح (Chrome ، و Edge ، و Firefox ، و Safari).
- لتعيين قيمة سمة منطقية ، مثل معطل ، يمكنك تحديد أي قيمة. يُنصح باستخدام سلسلة فارغة أو اسم السمة. كل ما يهم هو أنه إذا كانت السمة موجودة على الإطلاق ، بغض النظر عن قيمتها الفعلية، تعتبر قيمتها صحيحة. يعني عدم وجود السمة أن قيمتها خاطئة. من خلال تعيين قيمة السمة المعطلة إلى السلسلة الفارغة ("") ، فإننا نعيِّن معطلة على "صواب" ، مما يؤدي إلى تعطيل الزر.
طرق DOM التي تتعامل مع سمات العنصر:
| الأساليب الأكثر استخدامًا غير مدركين لمساحة الاسم | المتغيرات المدركة لمساحة الاسم (المستوى 2 من DOM) | طرق المستوى الأول من DOM للتعامل مع عُقد Attr مباشرةً (نادرًا ما تُستخدم) | الأساليب التي تعتمد على مساحة الاسم من المستوى 2 في DOM للتعامل مع عُقد Attr مباشرةً (نادرًا ما تُستخدم) |
|---|---|---|---|
| setAttribute (DOM 1) | تعيين السمة | setAttributeNode | setAttributeNodeNS |
| getAttribute (DOM 1) | getAttributeNS | getAttributeNode | getAttributeNodeNS |
| hasAttribute (DOM 2) | hasAttributeNS | - | - |
| removeAttribute (DOM 1) | إزالة السمة | removeAttributeNode | - |
تخصيص
- المستوى الثاني من DOM: setAttribute (تم تقديمه في DOM المستوى 1 الأساسي)
التوافق المتصفح
يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، يرجى مراجعة https://github.com/mdn/browser-compat-data وإرسال طلب سحب إلينا.
تحديث بيانات التوافق على جيثب
| سطح المكتب | متحرك | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| كروم | حافة | ثعلب النار | متصفح الانترنت | أوبرا | سفاري | عرض ويب Android | Chrome لنظام Android | Firefox لنظام Android | Opera لنظام Android | Safari على iOS | سامسونج إنترنت | |
| تعيين السمة | دعم Chrome الكامل نعم | دعم الحافة الكاملة 12 | دعم Firefox الكامل نعم | دعم IE الكامل 5 ملحوظات دعم كامل 5ملحوظات ملحوظات في Internet Explorer 7 والإصدارات الأقدم ، لا تقوم setAttribute بتعيين الأنماط وتزيل الأحداث عند محاولة تعيينها. | دعم Opera الكامل نعم | دعم Safari الكامل 6 | دعم WebView Android الكامل نعم | دعم Chrome Android الكامل نعم | دعم Firefox Android الكامل نعم | دعم Opera Android الكامل نعم | دعم Safari iOS الكامل نعم | دعم Samsung Internet Android الكامل نعم |
أسطورة
دعم كاملالدعم الكامل انظر ملاحظات التنفيذ. انظر ملاحظات التنفيذ.ملاحظات الوزغة
استخدام setAttribute () لتعديل سمات معينة ، وأبرزها القيمة في XUL ، يعمل بشكل غير متسق ، حيث تحدد السمة القيمة الافتراضية. للوصول إلى القيم الحالية أو تعديلها ، يجب عليك استخدام الخصائص. على سبيل المثال ، استخدم Element.value بدلاً من Element.setAttribute ().