Как обратиться к картинке в элементе?

Question

[cracker-test]

Есть html. Несколько div с картинкой и текстом внутри. Скажите, как я могу обратиться к картинке конкретного div элемента и при наведении на текст сменить класс картинки?

Пробовал перебрать циклом все элементы, но не могу обратиться к конкретной картинке. Всем спасибо

<div class="wrap">
<div index="0" class="tabs__btn type-of-therapy-item tabs__active">
  <img class="type-of-therapy-img type-of-therapy-img-hidden type-of-therapy-img__left-img" src="//localhost:3000/img/arrow.svg" alt="море»">Текст</div>
<div index="1" class="tabs__btn type-of-therapy-item tabs__active">
  <img class="type-of-therapy-img type-of-therapy-img-hidden type-of-therapy-img__left-img" src="//localhost:3000/img/arrow.svg" alt="море»">Текст</div>
</div>

Comments

[Вадим]

Было бы не плохо обернуть текст в спан. Дальше при наведении на спан, если структура всегда одинаковая и будет одинаковая(что не супер надёжно) то просто брать предыдущий элемент.
Иначе сделать путешествие от спана к родителю, а в родителе уже найти картинку по селектору.

https://learn.javascript.ru/dom-navigation

Answer 1

[v3shin]

При такой формулировке вопроса обращение примерно такое:

let image = document.querySelector('div.tabs__btn[index="0"] img');

Как навесить событие читайте в документации.

Comments

[cracker-test]

мне нужно сделать так, чтобы вне зависимости от количества блоков div я мог обратиться к картинке элемента на который навел мышку

[VolgaVolga]

cracker-test, на общего родителя навесьте хендлер события наведения и берите картинку из event.target.

[v3shin]

cracker-test, оберните текст в span с классом, скажем, spanClass.

document.addEventListener('mouseover', function (e) {
    if (e.target.closest('.spanClass')) {
        e.target.closest('.tabs__btn').querySelector('img').classList.add('newClassForImage');
    }
});

Answer 2

[Stalker_RED]