CSS.escape: لماذا يفشل querySelector مع بعض قيم id؟

الخلاصة السريعة

افصل قيمة السمة عن لغة المحدد

صلاحية قيمة id في HTML لا تعني صلاحيتها كما هي داخل محدد CSS؛ احفظ أيضًا تفرد المعرّف. [4]

يسمح HTML بقيم تبدأ برقم أو تتضمن نقطتين، لكن قواعد كتابة المحددات مختلفة. المعرّف في المستند ليس قائمة كلمات؛ لا تضع داخله مسافات ASCII، ولا تمنح عنصرين المعرّف نفسه. إذا كنت تختار الأسماء من البداية، فالأسماء التي تصلح مباشرة كمُعرّفات CSS تقلل الحاجة إلى الهروب. أما اسم موجود في بيانات مشروعك فلا يصبح غائبًا لمجرد أنه يحتاج إلى تهيئة عند البحث. [4]

مرّر الشيفرة أفقيًا عند الحاجة.

<p id="12-card">البطاقة الأولى</p>
<p id="note:ready">الملاحظة</p>
<pre id="log" dir="ltr"></pre>

شاهد فشل المحدد قبل تصحيحه

ترمي querySelector خطأ SyntaxError للمحدد غير الصالح، بينما تعيد null للمحدد الصحيح الذي لا يجد تطابقًا. [2]

ضع HTML السابق في صفحة، وأضف الشيفرة التالية داخل script بعده. تظهر SyntaxError مرتين للمعرّفين المختارين. تلتقط الشيفرة الخطأ كي تواصل التجربة؛ لا تعالجه بتجاهله والافتراض أن العنصر غير موجود. عند التشخيص، افصل أولًا خطأ تركيب المحدد عن نتيجة البحث، ثم افحص المرجع المعاد قبل استخدام خصائصه في حالة تسمح بغياب العنصر. [2]

مرّر الشيفرة أفقيًا عند الحاجة.

const log = document.querySelector("#log");
const show = (value) => log.textContent += String(value) + "\n";
const ids = ["12-card", "note:ready"];
for (const id of ids) {
  try {
    show(document.querySelector("#" + id));
  } catch (error) {
    show(error.name);
  }
}

هيّئ جزء القيمة فقط

هيّئ قيمة المعرّف باستخدام CSS.escape، ثم ابنِ المحدد؛ لا تمرر المحدد المركب كله إلى الدالة. [1]

أضف هذه الأسطر بعد السابقة؛ تظهر قيمتا المعرّفين الأصليتين. تظل علامة # جزءًا من تركيب المحدد، وتدخل القيمة وحدها إلى CSS.escape. الدالة تهيئ نصًا لاستعماله في محددات CSS؛ لا تتعامل معها كترميز HTML أو كحل عام لكل مواضع إدخال النص. [1]

مرّر الشيفرة أفقيًا عند الحاجة.

for (const id of ids) {
  const selector = "#" + CSS.escape(id);
  show(document.querySelector(selector).id);
}

اختر البحث المباشر عندما يكفي

إذا كان المطلوب معرفًا واحدًا فقط، تستقبل getElementById قيمته مباشرة، مع مراعاة حالة الأحرف ووجود العنصر في المستند. [3]

يُظهر المقطع الأخير note:ready ثم null. لا تضف # إلى وسيط getElementById، لأنها تستقبل قيمة السمة، لا محددًا. كذلك، لا تمرر إليها النص المهيأ بدل القيمة الأصلية. إذا لم تجد العنصر، راجع تهجئة المعرّف وحالة الأحرف، وتأكد أن العنصر أضيف إلى المستند؛ إنشاؤه في متغير وحده لا يجعله ضمن البحث. تُظهر التجربة طريقتين للوصول إلى العنصر نفسه، ولا تقيس تفوق إحداهما في السرعة. [3]

مرّر الشيفرة أفقيًا عند الحاجة.

show(document.getElementById("note:ready").id);
show(document.getElementById("missing"));