JS DOM：如何访问嵌套元素

Question

It's very tricky question, but please can someone help me with it?

Let's suppose we have code, similar to that:

<div id='main'>

<div class='class1'>
<div class='class2'>
<div class='class3'>
<div class='class4'>
<div class='class5'>
<div class='class6'>
<div class='class7'>
<div class='class8'>

<button class='button'/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Is there any way to access button inside these elements?

Answer 1

You can use document.querySelector() to select elements just like you would with CSS, in your case:

document.querySelector("#main button")