Salve, Adauto!
É uma abordagem. Porém, utilizando a lógica que você apontou:
var campoFiltro = document.querySelector('#filtrar-tabela');
campoFiltro.addEventListener("input", function () {
var pacientes = document.querySelectorAll('.paciente');
for (var i = 0; i < pacientes.length; i++) {
var paciente = pacientes[i];
var tdNome = paciente.querySelector(".info-nome");
var nome = tdNome.textContent;
console.log(this.value);
if (nome != this.value && this.value.length > 0) {
paciente.classList.add("invisivel");
} else {
paciente.classList.remove("invisivel");
}
}
});
Independente se eu tenho o value, nó vamos percorrer o DOM buscando a td com a classe info-nome:
var tdNome = paciente.querySelector(".info-nome");
E também fazer a comparação, mesmo que eu não tenha value:
if (nome != this.value && this.value.length > 0)
É um caso a se pensar, e não necessariamente escrever menos código é interessante.
Percorrer o DOM é sempre um custo que vale a pena ser considerado.
Mas é bacana sempre buscar alternativas, quase sempre existem mais de uma solução para um mesmo problema.
Acredito que uma boa métrica, nesse caso, é saber quantos pacientes normalmente vamos ter na tabela.
