반복문

※ 반복문 종류와 예시

루프와 반복 - JavaScript | MDN

 

 

가장 간단한 while문만 살펴보았다.

 

 

 

이제 이걸 야간모드에서 a태그들의 속성을 변경할 수 있도록 활용해보자.

 

 

 

 

 

이전 글의 조건문에서, a태그들도 색을 변경하려고 했는데 하나의 a태그만 선택되는 문제가 있었다.

 

그 해결법을 이제 알았다. 거의 한 달만에 자바스크립트 보네ㅜㅜ 반성하자.. 애들 방학 끝나면 빡세게 공부해야지.

 

아무튼 해결법은 querySelectorAll이었다.

 

querySelector과 querySelectorAll이 있어서 차이가 뭐지싶었는데 바로 알았네.querySelectorAll은 말 그대로 같은 태그를 모두 선택해오는 메소드이다.

 

실제로 콘솔에서 다음과 같이 확인할 수 있었다.

 

document.querySelectorAll('a')                   // 모든 a태그를 선택. NodeList로 a태그들이 배열된다
▶ NodeList(5) [a, a, a, a, a]          // NodeList는 배열(array)과는 다름, querySelectorAll의 객체로 주로 나옴  

var alist = document.querySelectorAll('a');
console.log(alist[0]);
▶ <a href="index.html" style="text-decoration: none;">Jin's journal</a>         // 첫 번째 a 태그

var alist = document.querySelectorAll('a');
console.log(alist[2]);
▶ <a href="2.html">책, 영화</a>                                                                      // 세 번째 a 태그

var alist = document.querySelectorAll('a');
console.log(alist.length);
▶ 5                                                                                                                    // alist의 길이

var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = 'red';                                              // 모든 a태그를 빨간색으로 바꾸기
i = i + 1;
}

 

 

 

 

 

최종적으로

a태그들 컬러속성을 주간 모드에는 진한 보라색으로, 야간모드에서는 연한 보라색으로 바꿨다.

 

See the Pen Untitled by j1n00000 (@j1n00000) on CodePen.