JavaScript -> Czy da się skrócić zapis document.querySelectorAll?

Question

Witam, czy da się jakoś skrócić zapis:

document.querySelectorAll(`.klasa`)[0].style.color = 'black';
document.querySelectorAll(`.klasa`)[1].style.color = 'black';

 

Answer 1

Tak. Wykorzystaj forEach:

document.querySelectorAll( `.klasa` ).forEach( ( element ) => {
	element.style.color = 'black';
} );

 

Comments

A czy da się jakoś skrócić zapis:

let animation0 = document.createElement('div');
                let animation1 = document.createElement('div'); 
                let animation2 = document.createElement('div');
                let animation3 = document.createElement('div');
                let animation4 = document.createElement('div');
                let animation5 = document.createElement('div');
                animation0.classList.add('animation-select');
                animation1.classList.add('animation-select');
                animation2.classList.add('animation-select');
                animation3.classList.add('animation-select');
                animation4.classList.add('animation-select');
                animation5.classList.add('animation-select');
                document.querySelector('.klasa').appendChild(animation0);
                document.querySelector('.klasa').appendChild(animation1);
                document.querySelector('.klasa').appendChild(animation2);
                document.querySelector('.klasa').appendChild(animation3);
                document.querySelector('.klasa').appendChild(animation4);
                document.querySelector('.klasa').appendChild(animation5);

 

---

Tak, stworzyć te elementy w pętli. Wówczas kod będzie dotyczył jednego elementu i będzie wewnątrz pętli, która będzie się wykonywać tyle razy, ile chcesz animacji.

Answer 2

Możesz też użyć for (const/let element of array/object NodeList). Pętla ta ma jedną ciekawą właściwość, że przy pomocy np.: warunku i polecenia break można przerwać jej wykonywanie za nim pętla wykona się "do końca".

 

Przykład

const numbers = [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

for (const number of numbers) {
  console.log(number);
  if (number === 5) break;
}

 

w przypadku document.querySelectorAll np.:

<div>1</div>
<div class="even">2</div>
<div>3</div>
<div class="even">4</div>
<div>5</div>
<div class="even">6</div>

.black {
  background-color: black;
  color: white;
}

// const even_numbers = document.querySelectorAll('div:nth-child(even)');
const even_numbers = document.querySelectorAll('.even');

for (const number of even_numbers) {
  console.log(number, number.textContent);
  number.classList.add('black');
}

 

Comments

A czy da się jakoś skrócić zapis:

let animation0 = document.createElement('div');
                let animation1 = document.createElement('div'); 
                let animation2 = document.createElement('div');
                let animation3 = document.createElement('div');
                let animation4 = document.createElement('div');
                let animation5 = document.createElement('div');
                animation0.classList.add('animation-select');
                animation1.classList.add('animation-select');
                animation2.classList.add('animation-select');
                animation3.classList.add('animation-select');
                animation4.classList.add('animation-select');
                animation5.classList.add('animation-select');
                document.querySelector('.klasa').appendChild(animation0);
                document.querySelector('.klasa').appendChild(animation1);
                document.querySelector('.klasa').appendChild(animation2);
                document.querySelector('.klasa').appendChild(animation3);
                document.querySelector('.klasa').appendChild(animation4);
                document.querySelector('.klasa').appendChild(animation5);

 

---

const klasa = document.querySelector('.klasa');

for (let i=0; i<6; ++i) {
  const animation = document.createElement('div');
  animation.classList.add('animation-select');
  klasa.appendChild(animation);
}