كيفية استهداف عنصر الصورة في JavaScript

لتستهدف عنصر الصورة (img) في JavaScript لتغيير مصدر الصورة (src)، يمكنك استخدام خاصية document.querySelector() لاختيار العنصر المطلوب باستخدام محدد CSS. يمكنك استهداف العنصر الفرعي (img) داخل عنصر الديف (div) باستخدام محدد CSS المناسب. في هذه الحالة، يمكنك استخدام العنصر الأب div.cover مع العنصر الفرعي img كالتالي:

javascriptCopy code
// استهداف العنصر الأب
const parentDiv = document.querySelector('.cover');
// استهداف العنصر الفرعي داخل العنصر الأب
const imgElement = parentDiv.querySelector('img');

// تغيير مصدر الصورة
imgElement.src = 'new-img.jpg';

في هذا الكود، سنستهدف العنصر الأب باستخدام document.querySelector('.cover') ومن ثم نستهدف العنصر الفرعي img داخل العنصر الأب باستخدام parentDiv.querySelector('img')، ثم نقوم بتغيير مصدر الصورة (src) باستخدام imgElement.src = 'new-img.jpg';.

يرجى ملاحظة أنه يجب عليك استبدال 'new-img.jpg' بمسار الصورة الجديدة التي ترغب في استخدامها.

بالتأكيد، هنا بعض المعلومات الإضافية التي قد تجدها مفيدة:

1. يمكنك استخدام document.querySelector('.cover img') مباشرة للاستهداف العنصر img داخل العنصر div.cover بدون الحاجة إلى الخطوتين.

2. إذا كنت ترغب في تغيير عدة خصائص لعنصر الصورة، يمكنك فعل ذلك ببساطة عن طريق تعيين القيم الجديدة لكل خاصية على حدة. على سبيل المثال، لتغيير عرض وارتفاع الصورة يمكنك استخدام:

   javascriptCopy code
   imgElement.width = 100;
   imgElement.height = 100;
   

3. إذا كنت بحاجة إلى تحديد عنصر الصورة بناءً على العديد من المعايير، يمكنك استخدام document.querySelectorAll() بدلاً من document.querySelector() لاختيار عناصر متعددة ومن ثم تحديد العنصر المناسب من بينها.

4. يمكنك أيضًا استخدام getAttribute() و setAttribute() للعمل مع السمات الأخرى لعنصر الصورة، مثل alt, title, أو أي سمة أخرى تحتاج إلى تحديث.

هل هناك معلومات محددة أو عمليات تود القيام بها بخصوص استهداف العنصر الفرعي في JavaScript؟