| الدالة | تُعيد | حية؟ |
|---|---|---|
| getElementById() | عنصر واحد | — |
| getElementsByClassName() | HTMLCollection | نعم |
| querySelector() | أول عنصر مطابق | — |
| querySelectorAll() | NodeList | لا |
قبل تعديل أي عنصر في الصفحة، يجب أولاً "تحديده" أو "اختياره" من الـ DOM. توفر جافاسكريبت عدة دوال لذلك، وأبسطها getElementById() التي تُعيد عنصراً واحداً يطابق قيمة id محددة — وهي الأسرع أداءً لأن الـ id فريد دائماً في الصفحة.
getElementsByClassName() وgetElementsByTagName() تُعيدان مجموعة حية (HTMLCollection) من كل العناصر المطابقة لفئة CSS أو اسم وسم معين، وليس عنصراً واحداً. "حية" تعني أن هذه المجموعة تتحدث تلقائياً إذا أُضيفت أو حُذفت عناصر مطابقة من الصفحة لاحقاً.
الدالتان الأحدث والأكثر مرونة هما querySelector() وquerySelectorAll()، وتقبلان أي محدد CSS صالح (Selector) بالضبط كما تكتبه في ملف CSS — سواء id بـ #، أو class بـ .، أو وسم مباشرة، أو محددات معقدة تجمع أكثر من شرط. querySelector() تُعيد أول عنصر مطابق فقط، بينما querySelectorAll() تُعيد كل العناصر المطابقة كـ NodeList (وهي مجموعة ثابتة غير حية، بعكس HTMLCollection).
بسبب مرونتها الكبيرة وتوحيدها لصيغة CSS المألوفة، أصبحت querySelector وquerySelectorAll الخيار المفضل في الكود الحديث للتعامل مع تحديد العناصر، وتكاد تُغني تماماً عن الدوال القديمة الأخرى في معظم الحالات العملية.
| 1 | document.getElementById("myId"); |
| 2 | document.getElementsByClassName("myClass"); // HTMLCollection |
| 3 | document.getElementsByTagName("p"); // HTMLCollection |
| 4 | |
| 5 | document.querySelector(".myClass"); // أول عنصر مطابق |
| 6 | document.querySelectorAll("div.card"); // NodeList لكل المطابقين |
مثال 1: تحديد عناصر بطرق مختلفة
| 1 | <div id="header"> |
| 2 | <p class="highlight">فقرة مهمة</p> |
| 3 | <p class="highlight">فقرة أخرى مهمة</p> |
| 4 | </div> |
| 5 | |
| 6 | <script> |
| 7 | const رأس = document.getElementById("header"); |
| 8 | const أول_فقرة = document.querySelector(".highlight"); |
| 9 | const كل_الفقرات = document.querySelectorAll(".highlight"); |
| 10 | |
| 11 | console.log(كل_الفقرات.length); // 2 |
| 12 | كل_الفقرات.forEach(ف => console.log(ف.textContent)); |
| 13 | </script> |
مثال 2: محددات CSS معقدة مع querySelector
| 1 | // querySelector يدعم محددات CSS معقدة |
| 2 | const زر_داخل_نموذج = document.querySelector("form button[type=submit]"); |
| 3 | const كل_روابط_قائمة = document.querySelectorAll("nav ul li a"); |
| 4 | |
| 5 | // NodeList (من querySelectorAll) تدعم forEach مباشرة |
| 6 | كل_روابط_قائمة.forEach(رابط => { |
| 7 | console.log(رابط.href); |
| 8 | }); |