Navigating between the contents of an array

Question

Studying about array I understood that array = document.querySelectorAll(".nomeClasse") returns an array that contains each element that uses this class. But it’s still unclear to me how you access the elements within the created array.

<tbody id="tableTask">
        <tr class="task">
            <td class="infoIndice">1</td>
            <td class="infoTask">Limpar Cozinha</td>
        </tr>
        <tr class="task">
            <td class="infoIndice">1</td>
            <td class="infoTask">Recolher Cocô do Cachorro</td>
        </tr>
    </tbody>

In this example I use task = document.querySelectorAll(".task") and receive an array with 2 elements that are the 2 <tr> who use class task.

How, from there, I have access to the second td? (Collect Poop from the Dog)

If I want to change the contents of this tdfor example. there is some kind of "task[1].td(infoTask).innerHTML = "lavar a roupa";"?

Answer 1

Did you answer your question... task[1] is a correct way to access the second element of the array. Notes that querySelectorAll returns a collection, more or less an array. Then, to answer your second question you can use children[1] to access the second td or .querySelector('.infoTask').

Example:

const tasks = document.querySelectorAll(".task");
tasks[1].querySelector('.infoTask').innerText = 'Ir às compras';

<table>
  <tbody id="tableTask">
    <tr class="task">
      <td class="infoIndice">1</td>
      <td class="infoTask">Limpar Cozinha</td>
    </tr>
    <tr class="task">
      <td class="infoIndice">2</td>
      <td class="infoTask">Lavar a roupa</td>
    </tr>
  </tbody>
</table>