طريقة getAttribute ()
حتى الآن ، قدمنا طريقتان لاسترداد العقد العناصر المحددة: الأول هو استخدام طريقة getElementByID () ، والآخر هو استخدام طريقة getElementsByTagName (). بعد العثور على هذا العنصر ، يمكننا استخدام طريقة getAttribute () للاستعلام عن قيم سماته المختلفة.
طريقة getAttribute () هي وظيفة. يحتوي على معلمة واحدة فقط - اسم السمة التي تخطط للاستعلام عنها:
Object.getAttribute (السمة)
ومع ذلك ، لا يمكن استدعاء طريقة getAttribute () من خلال كائن المستند ، وهو ما يختلف عن الطرق الأخرى التي قدمناها من قبل. يمكننا فقط تسميته من خلال كائن عقدة عنصر واحد.
على سبيل المثال ، يمكنك الجمع بينه مع طريقة getElementsByTagName () للاستعلام عن سمة العنوان لكل عنصر <p> كما هو موضح أدناه:
var text = document.getElementsByTagName ("p") لـ (var i = 0 ؛ i <text.length ؛ i ++) {Alert (text [i] .getAttribute ("title") ؛}إذا قمت بإدراج الرمز أعلاه في نهاية مستند نموذج "قائمة التسوق" المقدمة مسبقًا وأعيد تحميل الصفحة في متصفح الويب ، فإن مربع حوار Alter مع رسالة نصية "تذكير لطيف" سوف يظهر على الشاشة.
لا يوجد سوى عنصر واحد <p> مع سمة العنوان في وثيقة قائمة التسوق. إذا كان للوثيقة واحدة أو أكثر من عناصر <p> بدون سمة عنوان ، فسيتم إرجاع مكالمة getAttribute ("العنوان") المقابلة. NULL هي قيمة فارغة في لغة JavaScript ، ومعنىها هو "الشيء الذي قلته غير موجود". إذا كنت ترغب في التحقق من ذلك شخصيًا ، فيرجى إدراج النص التالي في الفقرة النصية الموجودة في وثيقة قائمة التسوق:
<p> هذا مجرد اختبار </p>
ثم إعادة تحميل الصفحة. هذه المرة ، سترى حوار تغيير ، وسيكون مربع الحوار الثاني فارغًا أو يعرض فقط كلمة "NULL" - يعتمد الموقف المحدد على كيفية عرض متصفح الويب الخاص بك القيمة الفارغة.
يمكننا تعديل البرنامج النصي الخاص بنا بحيث يظهر رسالة فقط عند وجود خاصية العنوان. سنضيف عبارة if للتحقق مما إذا كانت قيمة الإرجاع لطريقة getAttribute () فارغة. بالاستفادة من هذه الفرصة ، أضفنا أيضًا عدة متغيرات لتحسين قابلية قراءة البرنامج النصي:
var ts = document.getElementsByTagName ("li") ؛ لـ (var i = 0 ؛ i <ts.length ؛ i ++) {text = ts [i] .getAttribute ("title") ؛ if (text!الآن ، إذا قمت بإعادة تحميل هذه الصفحة ، فستشاهد فقط مربع حوار Alter الذي يعرض رسالة "تذكير لطيف" ، كما هو موضح أدناه.
يمكننا حتى تقليل هذا الرمز إلى رمز أقصر. عند التحقق مما إذا كانت بيانات معينة هي قيمة خالية ، فإننا نتحقق بالفعل مما إذا كانت موجودة. يمكن تبسيط هذا النوع من الشيكات لاستخدام البيانات التي تم فحصها مباشرة كشرط لبيان IF. إذا كان (شيء ما) مكافئًا تمامًا إذا (شيء! = فارغ) ، ولكن من الواضح أن الأول أكثر إيجازًا. في هذا الوقت ، إذا كان هناك شيء ما ، فإن حالة البيان if سيكون صحيحًا ؛ إذا لم يكن هناك شيء ما ، فإن حالة البيان if ستكون خاطئة.
إلى هذا المثال ، طالما أننا نستبدل إذا (title_text! = null) بـ if (title_text) ، يمكننا الحصول على رمز أكثر إيجازًا. بالإضافة إلى ذلك ، من أجل زيادة قابلية قراءة الكود ، يمكننا أيضًا أن نغتنم هذه الفرصة لكتابة عبارات التغيير وإذا كانت البيانات على نفس الخط ، والتي يمكن أن تجعلها أقرب إلى الجمل الإنجليزية في حياتنا اليومية:
var ts = document.getElementsByTagName ("li") ؛ لـ (var i = 0 ؛ i <ts.length ؛ i ++) {text = ts [i] .getAttribut3.4.2 طريقة setAttribute ()
جميع الطرق التي قدمناها لك من قبل لا يمكن استخدامها إلا لاسترداد المعلومات. طريقة setAttribute () لها اختلاف أساسي عنهم: فهي تتيح لنا إجراء تعديلات على قيمة عقدة السمة.
على غرار طريقة getAttribute () ، فإن طريقة setAttribute () هي أيضًا وظيفة لا يمكن استدعاؤها إلا من خلال كائن عقدة العنصر ، ولكن طريقة setAttribute () تتطلب منا أن نمرر معلمتين إليها:
obect.setattribute (السمة ، القيمة)
في المثال التالي ، سيقوم البيان الأول باسترداد العنصر الذي يتم شراء قيمة سمة المعرف الخاصة به ، وسيقوم البيان الثاني بتعيين قيمة سمة العنوان لهذا العنصر إلى قائمة البضائع:
var Shopping = document.getElementById ("Buyasks") Shopping.SetAttribute ("title" ، "قائمة البضائع")يمكننا استخدام طريقة getAttribute () لإثبات أن قيمة سمة العنوان لهذا العنصر قد تغيرت بالفعل:
var Shopping = document.getElementById ("Buyasks") ؛ Alert (Shopping.getAttribute ("title")) ؛ Shopping.SetAttribute ("title" ، "A proces") ؛ ALERT (Shopping.getAttribute ("title")) ؛ستظهر العبارات المذكورة أعلاه حوار تنبيه على الشاشة: يظهر مربع حوار Alter الأول قبل أن تسمى طريقة setAttribute () ، ستكون فارغة أو يتم عرض كلمة "NULL" ؛ يظهر الثاني بعد تعيين قيمة سمة العنوان ، وسوف يعرض رسالة "قائمة البضائع".
في المثال أعلاه ، قمنا بتعيين سمة العنوان للعقدة الموجودة ، لكن هذه السمة لم تكن موجودة في المقام الأول. هذا يعني أن استدعاء SetAttribute () نؤكد فعليًا عمليتين: قم أولاً بإنشاء هذه السمة ، ثم قم بتعيين قيمتها. إذا استخدمنا طريقة setAttribute () على سمة موجودة لعقدة العنصر ، فسيتم كتابة القيمة الحالية لهذه السمة.
في مستند عينة "قائمة التسوق" ، يحتوي العنصر <p> بالفعل على سمة عنوان ، وقيمة هذه السمة هي تذكير لطيف. يمكننا استخدام طريقة setAttribute () لتغيير قيمتها الحالية:
<script type = "text/javaScript"> var ts = document.getElementsByTagName ("li") ؛ لـ (var i = 0 ؛ i <ts.length ؛ i ++) {var text = ts [i] .getAttribute ("title") ؛ Alert (title ") ؛ Alert (title] .getAttribute (" title ") if (text) {ts [i]سيقوم الرمز أعلاه أولاً باسترداد جميع عناصر <p> التي لديها بالفعل سمات عنوان من المستند ، ثم تعديل جميع قيم سمة العنوان الخاصة بهم إلى نص العنوان الجديد. على وجه التحديد لمستند "قائمة التسوق" ، سيتم كتابة قيمة العقار التي يتم الكتابة عليها تذكيرًا لطيفًا.
فيما يلي تفاصيل جديرة بالملاحظة: ستتغير التعديلات على المستند من خلال طريقة setAttribute () من أن الوثيقة تعرض التأثيرات و/أو السلوكيات في نافذة المتصفح لتغييرها وفقًا لذلك ، ولكن عندما ننظر إلى الكود المصدري للوثيقة من خلال خيار عرض المتصفح ، لن نستمر في رؤية قيمة السمة الأصلية - وهذا هو التعيينات التي تم إجراؤها (Methodtertive ". تأتي هذه الظاهرة من "غير متناسقة من الداخل والخارج" من وضع العمل في DOM: قم أولاً بتحميل المحتوى الثابت للمستند ، ثم تحديثها بشكل ديناميكي. لا يؤثر التحديث الديناميكي على المحتوى الثابت للوثيقة. هذا هو بالضبط القوة الحقيقية وإغراء DOM: محتوى الصفحة المنعش لا يتطلب من المستخدمين النهائيين إجراء عمليات تحديث الصفحة في متصفحاتهم.