Gostaria de saber uma possibilidade de um algoritmo para eu venha selecionar um um DOM de uma forma mais dinâmica, sem ter a necessidade de usar o getElementById
toda a vez.
Eu gostaria de selecionar todos os elementos e manipular no JS. Alguém pode me ajudar nisso, por favor?
<section id="step00" class="slide">
</section>
<section id="step01" class="slide">
</section>
Na verdade, estou tentando exibir e esconder os passos a cada click. Tipo Step By Step.
Imagine eu ter que fazer tudo isso:
const step00 = document.getElementById('step00')
const step01 = document.getElementById('step01')
const step02 = document.getElementById('step02')
const step03 = document.getElementById('step03')
const step04 = document.getElementById('step04')
const step05 = document.getElementById('step05')
const step06 = document.getElementById('step06')
const step07 = document.getElementById('step07')
const step08 = document.getElementById('step08')
const step09 = document.getElementById('step09')
const step10 = document.getElementById('step10')
const endTutorial = document.getElementById('endTutorial')
function initTutorial() {
showStep00()
}
function showStep00() {
console.log('Inicio o passo 0')
step00.removeAttribute('hidden')
step01.setAttribute('hidden', 'true')
}
function showStep01() {
console.log('Inicio o passo 1')
step00.setAttribute('hidden', 'true')
step01.removeAttribute('hidden')
}
Deve existir algo mais dinâmico, onde quando eu clicar em um botão com onclick="step03"
, por exemplo, todos os outros botões são escondidos.