الوصول الى العناصر في جافا سكربت
لماذا علينا ان نتعلم طرق الوصول الى العناصر ؟
اولاً : لان الطريقة document.write تستبدل كامل المستند بمحتواها اي انها تزيل كل عناصر المستند الاخرى وهي طريقة مفيدة عند تعلم الجافا سكربت لكنها غير فعالة عند بناء مواقع الانترنت .
ثانياً : عندما نصل الى عنصر محدد من المستند فأننا نستطيع التحكم بمحتوى هذا العنصر كأن نغيره كليا او ان نعدله او ان نستخدم هذا المحتوى في عناصر اخرى او ان نجري عليه بعض عمليات التحقق من الصحة .
ثالثاً : عندما نصل الى عنصر محدد من المستند فأننا نستطيع التحكم بكل خصائصه فنغير الوانه وموضعه وشكله وحتى ان نخفيه كليا ونستعيده عند الحاجة ونتحكم بشكل كامل بكافة خصائص css للعنصر .
رابعاً : عند الوصول لعناصر النماذج نستطيع التحقق من صحة مدخلات المستخدم قبل ارسال النموذج الى السيرفر وفق شروط معينة نحددها نحن مسبقا في الكود البرمجي .
طرق الوصول للعناصر :
1- الطريقة document.getElementById تمكننا هذه الطريقة من الوصول الى عنصر واحد فريد يمتلك الصنف المحدد id .
مثال :
سنقوم بتغيير محتوى العنصر p في هذا المثال من المحتوى الافتراضي الى محتوى آخر .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Change Content</title>
<script>
function change() {
x=document.getElementById("show");
x.innerHTML ="I am the new content";
}
</script>
</head>
<body>
<p id="show">Old text</p>
<button onclick="change();">Change Content</button>
</body>
</html>
نلاحظ انه عندما نضغط على الزر في المثال السابق يتغير محتوى العنصر p الى المحتوى الجديد , لكننا استخدمنا طريقة اضافية لانجاز العمل المطلوب وهي الطريقة innerHTML وهذه الطريقة تقوم بتغير محتوى العنصر المحدد كما فعلنا في مثالنا او تقوم بارجاع محتوى العنصر المحدد كما في المثال التالي :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Get Element Content</title>
<script>
function useContent() {
x=document.getElementById("show");
alert(x.innerHTML);
}
</script>
</head>
<body>
<p id="show">Hello ! I am content as you see</p>
<button onclick="useContent();">show Content in Alert Box</button>
</body>
</html>
عندما نقوم بالضغط على الزر يصبح محتوى العنصر p داخل رسالة التنبيه كما في الشكل التالي :
2 – الطريقة document.getElementsByName تمكننا هذه الطريقة من الوصول الى جميع عناصر المستند والتي تحمل اسم معين .
3 – الطريقة document.getElementsByTagName باستخدام هذه الطريقة نستطيع الوصول الى عناصر المستند من خلال اسماء وسومها .
4 – من خلال مصفوفات المستند كمصفوفة الصور ومصفوفة النماذج ومصفوفة الوصلات .
مصفوفة النماذج :
هي جميع النماذج الموجودة في المستند الحالي وبالترتيب
مثال :
هذا المثال لمعرفة عدد النماذج الموجودة في المستند
<!DOCTYPE html> <html dir="rtl"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>عدد النماذج</title> </head> <body> <form> <input type="text" /> <input type="submit" /> </form> <form> <input type="text" /> <input type="submit" /> </form> <form> <input type="text" /> <input type="submit" /> </form> <form> <input type="text" /> <input type="submit" /> </form> <p>عدد النماذج في هذا المستند : <script> x = document.forms.length; document.write(x); </script> </p> </body> </html>
