closest في JavaScript: هل يبدأ البحث من العنصر نفسه؟

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

ابدأ بالعنصر قبل أن تصعد

لا تتجاوز closest نقطة البداية: قد تعيدها هي، وقد تعيد سلفًا مطابقًا، أو null عند غياب التطابق. [1]

ضع HTML التالي في صفحة، ثم JavaScript داخل script بعد العناصر. البداية inner تحمل الفئة card، فتظهر inner أولًا، ثم null للمحدد الغائب. وجود بطاقة خارجية لا يجبر البحث على تجاوز المطابقة الأولى. أما محدد غير صالح نحويًا فيرمي SyntaxError؛ لا تخلط هذا الخطأ بنتيجة بحث سليمة لم تجد عنصرًا. [1]

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

<article id="outer" class="card">
  <section id="inner" class="card">
    <span id="label" class="tag">بطاقة القراءة</span>
  </section>
</article>
<pre id="log" dir="ltr"></pre>

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

const card = document.querySelector("#inner");
const log = document.querySelector("#log");
const show = (value) => log.textContent += String(value) + "\n";
show(card.closest(".card").id);
show(card.closest(".missing"));

غيّر اتجاه البحث عند طلب ابن

تبحث querySelector عن عنصر تابع مطابق؛ لا تستعملها بدل البحث نحو الأسلاف. [2]

أضف السطرين التاليين بعد الشيفرة السابقة. المعرّف label يعود لأن عنصره تابع للبطاقة ويحمل الفئة tag. ثم تظهر null للبحث عن بطاقة داخل inner؛ البطاقة نفسها لا تدخل ضمن أبنائها. حتى عندما يكون المحدد واحدًا، فإن نطاق العناصر التي تبحث بينها الدالة جزء من السؤال. اختر نقطة البداية بعناية بدل تغيير اسم الدالة حتى تظهر نتيجة غير فارغة. [2]

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

show(card.querySelector(".tag").id);
show(card.querySelector(".card"));

اختبر المطابقة دون الانتقال

تجيب matches عن مطابقة العنصر نفسه بقيمة منطقية، ولا تعيد عنصرًا بديلًا. [3]

تابع المثال بالسطرين أدناه: النتيجة true ثم false. نحن نختبر البطاقة inner في المرتين؛ وجود ابن يحمل tag لا يجعل البطاقة تحمل الفئة ذاتها. تفيد matches عندما يكون العنصر بين يديك وتريد شرطًا لاتخاذ قرار بشأنه. لا تتعامل مع القيمة المعادة كعنصر له معرّف، ولا تفسر false على أنها نفي لوجود الفئة في أي مكان آخر من الصفحة. [3]

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

show(card.matches(".card"));
show(card.matches(".tag"));

اعرف الأب المباشر وحدود المرجع

تعطي parentElement الأب المباشر إن كان عنصرًا؛ وهي لا تختار الأب بحسب محدد CSS. [4]

يعرض الاختبار الأخير outer ثم null. للبطاقة inner أب مباشر هو عنصر article، بينما أب عنصر html هو المستند، وليس عنصرًا؛ لذلك لا تعطيه parentElement. افحص القيمة قبل قراءة خصائصها عندما لا تضمن البنية. الأسماء والمسافات في الرسم لتوضيح علاقة الاحتواء، ولا يعتمد العثور على الأب على قرب المستطيلات بصريًا. شغّل المقاطع بالترتيب في الصفحة نفسها لتبقى المراجع معرفة. [4]

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

show(card.parentElement.id);
show(document.documentElement.parentElement);