ملخص للطرق الشائعة للحصول على عناصر في جافا سكريبت

هناك ثلاث طرق شائعة للحصول على عناصر ، وهي الاسم من خلال معرف العنصر والاسم من خلال العلامة والاسم من خلال الفصل.

getElementByid

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

إنها وظيفة فريدة من نوعها لكائن المستند ولا يمكن استدعاؤها إلا من خلالها. الطرق المستخدمة على النحو التالي:

نسخة الكود كما يلي:

document.getElementById ('Demo') // Demo هو المعرف المقابل للعنصر

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

getElementsbyTagname

تقوم هذه الطريقة بإرجاع مجموعة من الكائنات (لتكون دقيقة ، مجموعة HTMLCollection ، إنها ليست صفيفًا حقيقيًا) ، يتوافق كل كائن مع عنصر يحتوي على علامة معينة في المستند. على غرار GetElementById ، توفر هذه الطريقة معلمة واحدة فقط ، ومعلمةها هي اسم العلامة المحددة. رمز المثال هو كما يلي:

نسخة الكود كما يلي:

document.getElementsByTagname ('li') // li هو اسم العلامة

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

نسخة الكود كما يلي:

var demo = document.getElementById ('Demo') ؛

var lis = demo.getElementSbyTagname ('li') ؛

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

getElementsByClassName

بالإضافة إلى الحصول على عناصر من خلال تحديد العلامات ، يوفر DOM أيضًا طريقة getElementsByClassName للحصول على العنصر باستخدام اسم الفئة المحدد. ومع ذلك ، نظرًا لأن هذه الطريقة جديدة نسبيًا ، فإن المتصفحات القديمة لا تدعمها ، مثل IE6. ومع ذلك ، يمكننا تعويض أوجه القصور في المتصفحات القديمة من خلال الاختراق. تسمى الطريقة على النحو التالي:

نسخة الكود كما يلي:

document.getElementsByClassName ('Demo') // اسم الفصل المحدد بواسطة العرض التوضيحي هو

مثل getElementsByTagName ، يمكن استدعاء هذه الطريقة من قبل العناصر العادية بالإضافة إلى أن يتم استدعاؤها بواسطة كائنات المستند.

بالنسبة للمتصفحات القديمة ، مثل IE6 و 7 ، يمكننا تنفيذها من خلال الاختراق التالي:

نسخة الكود كما يلي:

وظيفة getElementsByClassName (العقدة ، className) {

if (node.getelementsbyclassname) {

return node.getElementsByClassName (className) ؛

}آخر {

نتائج var = [] ؛

var elems = node.getElementSbyTagName ("*") ؛

لـ (var i = 0 ؛ i <elems.length ؛ i ++) {

if (elems [i] .classname.indexof (className)! = -1) {

النتائج [النتائج. الطول] = elems [i] ؛

}

}

نتائج العودة

}

}

يوسع

إذا لم تكن راضيًا فقط عن طرق اختيار العنصر أعلاه ، فأنت تريد الحصول على عناصر من خلال المحددات مثل jQuery. تشبه طريقة التنفيذ مع GetElementsByClassName أعلاه. إذا كنت مهتمًا ، فيمكنك تنفيذ مجموعة من المختارين. ومع ذلك ، أعتقد أن الطرق الثلاث المذكورة أعلاه جنبًا إلى جنب مع فقاعات الأحداث كافية ، بعد كل شيء ، هذه العروض الثلاثة ممتازة.

ما سبق هو كل شيء عن هذا المقال ، آمل أن يكون مفيدًا للجميع.