I need a clarification of targeting an element from the markup

I am following a class online and the tutor target a <button> document in which I don't really understand how he did it because he used a document.querySelector to target the parent and that's all.

<div class="row">
    <form id="task-form" action="index.php">
        <div class="input-field col s12">
            <input type="text" name="task" id="task" value="">
            <label for="task">New Task</label>
        </div>
    </div>
    <button id="add" class="btn">Add</button>
</form>

he then wrote :

document.querySelector('form').addEventListener('submit', function(event) { /* ... */ })

to me what I understand is that the querySelector will only select the firstChild in this case.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/x9p2GDY