Modificando células de tabelas HTML com JavaScript

Suponha que tenhamos uma tabela HTML #table. Suponha que nossa tarefa seja fazer algo com cada célula da tabela, por exemplo, escrever o texto '!' em cada uma delas.

Vamos discutir os detalhes para resolver essa tarefa.

Como você sabe, uma tabela HTML tem uma estrutura bidimensional: existem linhas e dentro delas existem células. Podemos resolver nossa tarefa da seguinte forma: percorrer as linhas com um loop e em cada linha percorrer as células com um loop e realizar a ação desejada com elas. Ou seja, o esquema descrito é semelhante à forma como criaríamos tal tabela, preenchendo-a com linhas e células.

No entanto, neste caso, dois loops aninhados seriam desnecessários: podemos simplesmente obter todos os td e percorrê-los com um loop, executando a operação necessária. Vamos fazer isso:

javascriptlet tds = document.querySelectorAll('#table td');

for (let td of tds) {
  td.textContent = '!';
}