[DOM] HTML DOM을 활용한 여러 개의 요소 선택 및 조작

 

DOM에서 여러개의 요소 선택하기

DOM에서 여러 개의 요소를 선택하여면 qeurySelectorAll  함수를 사용합니다. 이함수는 CSS선택자를 사용하여 원하는 요소를 선택하고 NodeList라는 객체로 반환합니다. 예를 들어,다음 코드는 모든 '<li>'  태그를 선택하여 NodeList로 저장합니다.

let elements = document.querySelectorAll("ul li");

선택한 요소 조작하기

선택한 요소를 조작하려면 반복문을 사용하여 NodeList의 각 요소를 순회합니다. 이 예제에서는 for 반복문을 사용하여 각<li> 요소을 내용을 출력하고 줄 바꿈을 추가합니다.

// HTML
<ul>
    <li>HTML5</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>Springboot</li>
</ul>
    <!-- 출력위치 : DOM 조작후 출력위치 -->
    <div id="output"></div>

// JavaScript
for (let i = 0; i < elements.length; i++) {
    document.querySelector("#output").innerHTML += elements[i].innerHTML;
    document.querySelector("#output").innerHTML += "<br/>";
}

위 코드에서 elements[i].innerHTML은 각 <li> 요소의 내용을 나타냅니다. 이를 #output 요소의 innerHTML에 추가하고 줄 바꿈 태그 '</br>도 추가하여 결과를 출력합니다.

결과