0Pricing
JavaScript Academy · درس

تحديد العناصر باستخدام querySelector

اعثروا على العناصر باستخدام محددات CSS.

تحديد العناصر باستخدام querySelector درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

تعرّف على querySelector

يعيد querySelector أول عنصر يطابق محدد CSS، أو يعيد null إذا لم يوجد تطابق. ويتوفر على document وعلى كل عنصر.

const title = document.querySelector("h1");
console.log(title.textContent);

يعمل أي محدد CSS

تكمن قوة querySelector في أنه يقبل المحددات نفسها التي تستخدمها في CSS: الوسوم، والأصناف، والمعرّفات، والسمات، وتركيباتها.

document.querySelector("#main");      // by id
document.querySelector(".card");      // by class
document.querySelector("input[type=email]"); // by attribute

querySelectorAll

يعيد querySelectorAll جميع العناصر المطابقة في NodeList ثابتة. وحتى عند عدم وجود أي تطابق، فإنه يعيد قائمة فارغة (ولا يعيد null مطلقًا).

const cards = document.querySelectorAll(".card");
console.log(cards.length);

التكرار على النتائج

تدعم NodeList الناتجة من querySelectorAll استخدام forEach مباشرةً، مما يجعل التكرار واضحًا ونظيفًا.

const items = document.querySelectorAll("li");
items.forEach((li) => {
  console.log(li.textContent);
});

محددات العناصر المتحدرة

يمكنك استهداف العناصر المتداخلة باستخدام مسافة (للعنصر المتحدر) كما في CSS. يعثر هذا على كل .price داخل .product.

const prices = document.querySelectorAll(".product .price");

دمج الأصناف

تعني كتابة الأصناف متتابعةً من دون مسافة أن العنصر يجب أن يتضمن جميع هذه الأصناف. نطابق هنا الأزرار التي تكون أساسية وكبيرة في الوقت نفسه.

const btn = document.querySelector("button.primary.large");

استعلامات محددة النطاق

يبحث استدعاء querySelector على عنصر (وليس على document) داخل ذلك العنصر فقط. وهذا يجعل عمليات البحث محلية وسريعة.

const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");

الأصناف الزائفة

تعمل الأصناف الزائفة البنيوية مثل :first-child و:nth-of-type أيضًا.

document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");

التعامل مع عدم وجود تطابق

بما أن querySelector قد يعيد null، فتحقق من النتيجة قبل استخدامها لتجنب حدوث TypeError.

const banner = document.querySelector(".banner");
if (banner) {
  banner.classList.add("hidden");
}

محددات السمات

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

const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");

querySelector مقارنةً بواجهات API الأقدم

يُعد querySelector أكثر مرونة من getElementById لأنه يقبل أي محدد، لكن عمليات البحث بالمعرّف لا تزال أسرع قليلًا. استخدم الأداة المناسبة للمهمة.

document.querySelector("#nav");        // flexible
document.getElementById("nav");        // fastest for ids

تحقق سريع

اختبر مدى فهمك للمحددات.

مراجعة

تعلمت أن querySelector يعيد أول تطابق (أو null)، وأن querySelectorAll يعيد NodeList ثابتةً تتضمن جميع التطابقات. يقبل كلاهما محددات CSS كاملة، ويمكن تحديد نطاق البحث ليقتصر على عنصر أب. احرص دائمًا على التحقق من null عند استخدام querySelector.

الأسئلة الشائعة

هل درس «تحديد العناصر باستخدام querySelector» مجاني؟

نعم — نص درس «تحديد العناصر باستخدام querySelector» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «تحديد العناصر باستخدام querySelector»؟

اعثروا على العناصر باستخدام محددات CSS. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «تحديد العناصر باستخدام querySelector»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. تحديد العناصر باستخدام querySelector
  2. getElementById وgetElementsByClassName
  3. التنقل بين العناصر الأصلية والفرعية والشقيقة
  4. NodeList مقابل HTMLCollection
← العودة إلى JavaScript Academy