Obtendo elementos DOM sem duplicatas
Suponha que temos parágrafos e um botão:
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>
<button>click me</button>
Suponha que o usuário clique nesses parágrafos
em uma ordem arbitrária. Vamos fazer com que,
ao clicar no botão, no final de cada
parágrafo que foi clicado, seja
adicionado um ponto de exclamação. Vamos resolver o problema
usando Set.
Vamos começar. Primeiro, vamos obter nossos elementos em variáveis:
let button = document.querySelector('button');
let elems = document.querySelectorAll('p');
Vamos criar uma nova coleção Set:
let set = new Set;
Vamos percorrer os parágrafos com um loop e atribuir a eles um manipulador de clique:
for (let elem of elems) {
elem.addEventListener('click', function() {
});
}
Agora, ao clicar em um parágrafo, vamos adicionar esse parágrafo à coleção:
for (let elem of elems) {
elem.addEventListener('click', function() {
set.add(this);
});
}
Por estarmos usando a coleção Set,
um clique repetido no parágrafo não levará
à adição de uma duplicata do parágrafo.
Agora, ao clicar no botão, vamos percorrer o conteúdo da nossa coleção e adicionar um ponto de exclamação ao final de cada parágrafo:
button.addEventListener('click', function() {
for (let elem of set) {
elem.textContent = elem.textContent + '!';
}
});
Fornecidos parágrafos e um botão. O usuário clica nesses parágrafos em uma ordem arbitrária. Faça com que, ao clicar no botão, no final de cada parágrafo que foi clicado, seja adicionado um ponto de exclamação.
