Retrieving DOM element data in JavaScript

Destructuring allows us to get text and DOM attribute values right in the loop. Let's see how it works. Suppose we have the following paragraphs:

<+html+>

text1

text2

text3

<-html->

Let's get a collection of these paragraphs into a variable:

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

And go through the elements in a loop, separating the numbers and the elements themselves:

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

And now let's destructurize the elements, retrieving their id and texts from them:

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

Given the following code:

<+html+> <-html->

Get numbers, id and value of inputs.

enru