JavaScript에서 DOM 요소 데이터 가져오기

구조 분해를 사용하면 DOM의 텍스트와 속성 값을 반복문 내에서 직접 가져올 수 있습니다. 이것이 어떻게 작동하는지 알아봅시다. 다음과 같은 단락이 있다고 가정해 보겠습니다:

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

이 단락들의 컬렉션을 변수에 가져옵시다:

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

번호와 요소 자체를 분리하여 요소들을 반복해 봅시다:

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

이제 요소들에서 그들의 id와 텍스트를 가져오도록 구조 분해를 수행해 봅시다:

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">