23. 배열과 반복문의 활용

 

웹 페이지에 있는 모든 <a> 태그 가져오기

document.querySelectorAll('a');

---

모든 <a> 태그를 가져와서 alist 변수에 넣고 출력하기

var alist = document.querySelectorAll('a');

console.log(alist[0]);

console.log(alist[1]);

console.log(alist.length);

---

반복문으로 모든 링크 출력하기

var alist = document.querySelectorAll('a');

var i = 0;

while( i < alist.length ) {

console.log( alist[i] );

i = i + 1;

}

---

이것들을 이제 적용 해보자 !

 

예시) 야간모드일 경우에는 <a> 태그의 글자 색을 'powderblue'로 만들고, 주간모드일 경우에는 <a> 태그의 글자 색을 'blue'로 바꿔보자

... 생략 ...
<input type="button" value ="night" onclick="
   var target = document.querySelector('body');
   if(this.value === 'night') {
    target.style.backgroundColor = 'black';
    target.style.color = 'white';
    target.value = 'day';

   var alist = document.querySelectorAll('a');
   var i = 0;
   while(i < alist.length) {
     alist[i].style.color = 'powderblue';
     i = i + 1;
    }
   } else {
   target.style.backgroundColor = 'white';
   target.style.color = 'black';
   target.value = 'night'; 

   var alist = document.querySelectorAll('a');
   var i = 0;
   while(i < alist.length) {
     alist[i].style.color = 'blue';
     i = i + 1;
     }
   }
">
... 생략 ...

 

이처럼 반복문이라는 것을 이용하면 아주 많은 일을 손쉽게 처리 할 수 있습니다. 그리고 컴퓨터는 많은 경우에 서로 연관된 데이터를 배열의 형태로 돌려주기 때문에 배열은 무척 중요하고 반복문도 정말 중요한 개념 입니다.