كيف استخدم querySelectorAll لتحديد img اذا كانت محاطة ب a؟

يمكن وضع اثنين من Tags بالتسلسل

let images = document.querySelectorAll("a img");

سيعيد الاستعلام جميع الصور،

يمكن المرور عليهم بحلقة

images.forEach((img)=>console.log(img.src));

سوف تطبع مسارات الصور مثلاً

إن كنت تقصد أنك تريد تحديد عناصر a التي لديها صور بداخلها، فيمكنك أن تستخدم has: بالشكل التالي:

const links = document.querySelectorAll('a:has(img)')
console.log(links)

هنا سيتم تحديد أي عنصر a يوجد في داخله صورة img

ما رأيك ان تقوم اولا بتحديد الصور التي هي داخل عنصر a باستخدام المحدد السليل:

a img

ثم المرور على كل عنصر واستبداله بالأب المباشر له (من الطبيعي ان يكون هو الصورة img).

نتحصل بهذا على مجموعة من العناصر a التي تمتلك صورا داخلها.

مثال:

// تحديد الصور التي هي داخل عنصر a
let imgs = document.querySelectorAll('a img');

// المرور على كل عنصر واستبداله بالأب المباشر له
let anchors = Array.from(imgs).map(img => img.parentNode )

// استعراض محتوى HTML لكل عنصر anchor للتأكد من الناتج
anchors.forEach(anchor => {
   console.log(anchor.innerHTML)
})