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

Question

[ne_pes]

Пример

<div class="first">
  <div><h4>Hello</h4></div>
  <div><h4>Hi</h4></div>
  <div><h4>Say</h4></div>
</div>

нужно обратиться к диву, который лежит в классе "first"
примерно:

document.getElementsByClassName("first").getElementsByTagName("div").onclick = function() {
        alert('World')
    }

Answer 1

[alex]

document.getElementsByClassName('first')[0].getElementsByTagName('div')[0]

document.querySelector('.first > div')

Comments

[ne_pes]

document.querySelector('.first > div') так работает только на первый див, а если их несколько?

[alex]

ne_pes, document.querySelectorAll('.first > div')

[ne_pes]

Alex, теперь и первый див не работает)

[alex]

ne_pes,

[alex]

console.log(document.querySelectorAll('.first > div'))

посмотрите что у вас в консоли выводится, и объясните мне, с чего вы вообще взяли, что это будет работать так, как вы хотите? если не додумаетесь, лучше используйте jquery

[ne_pes]

Alex, он находит все дивы, но такой код не работает (надо чтоб при нажатии на каждый див срабатывала функция)

document.querySelectorAll('.first > div').onclick = function () {
        console.log("ss")
    }

[alex]

ne_pes, последняя подсказка, сравните:

console.log(document.querySelector('.first > div'))

console.log(document.querySelectorAll('.first > div'))

а потом почитайте про циклы и массивы

Answer 2

[FenRo9]

document.querySelector('.first').children[0].onclick = function() {
        alert('World')
}