Lấy dữ liệu của các phần tử DOM trong JavaScript

Cú pháp destructuring cho phép chúng ta lấy văn bản và giá trị thuộc tính của DOM trực tiếp trong vòng lặp. Hãy cùng tìm hiểu cách nó hoạt động. Giả sử chúng ta có các đoạn văn sau:

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

Hãy lấy tập hợp các đoạn văn này vào một biến:

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

Hãy duyệt qua các phần tử bằng vòng lặp, tách số thứ tự và chính các phần tử:

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

Và bây giờ hãy thực hiện destructuring các phần tử, lấy từ chúng id và văn bản của chúng:

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

Cho đoạn mã sau:

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

Hãy lấy số thứ tự, id và value của các ô input.