Het ophalen van DOM element gegevens in JavaScript

Destructuring stelt ons in staat om tekst en attribuutwaarden van DOM direct in de loop te verkrijgen. Laten we eens begrijpen hoe dit werkt. Stel dat we de volgende alinea's hebben:

html<p id="id1">text1</p>
<p id="id2">text2</p>
<p id="id3">text3</p>

Laten we de collectie van deze alinea's in een variabele zetten:

javascriptlet elems = document.querySelectorAll('p');

Laten we de elementen herhalen met een loop, waarbij we de sleutels en de elementen zelf scheiden:

javascriptfor (let [key, elem] of elems.entries()) {
  console.log(key, elem);
}

Laten we nu destructuring toepassen op de elementen, waarbij we hun id en teksten eruit halen:

javascriptfor (let [key, {id, textContent}] of elems.entries()){
  console.log(key, id, textContent);
}

html<input id="id1" value="111">
<input id="id2" value="222">
<input id="id3" value="333">