DOM 다루기 :: 모든 li 태그 색상 변경 방법 (JavaScript 코드 예제)

HTML

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

 

Javascript

 // 모든 li 태그를 가져옵니다.
var items = document.getElementsByTagName("li");

// 각 li 태그의 색상을 변경합니다.
for (var i = 0; i < items.length; i++) {
    items[i].style.color = "red";
}

설명

1. document.getElementsByTagName("li")는 모든 <li> 요소를 HTMLCollection으로 반환
2. for 루프를 통해 모든 <li> 요소를 순회하며 스타일을 변경
3. items[i].style.color = "red";로 각 <li> 요소의 텍스트 색상을 빨간색으로 설정함

결과

페이지를 실행하면 <li> 요소의 텍스트 색상이 빨간색으로 변경됩니다! 😊

 

추가 Tip (코드 효율성)

최신 JavaScript에서는 querySelectorAll과 forEach를 사용해 조금 더 간단하게 코드를 짤 수 있습니다

document.querySelectorAll("li").forEach(item => {
    item.style.color = "red";
});