배운 배열과 반복문을
야간모드일때는 링크들이 밝게 나타나고
주간일때는 어둡게 나타나도록 투입해보자

검사를 통해 웹페이지에 있는 모든 a태그를 가져오려고 할때
querySelector 라고 하는 함수는
a태그에 해당되는 태그중 첫번째에 해당되는것만 가져온다

우리가 할려는것과 맞지않으니 검색해보자


검색 결과 querySelectorAll을 사용하는 것 같으면
다시 검색을 해서 어떤 문법으로 쓰고 어떻게 사용하는지에 대한 설명을 찾아보면된다

querySelectorAll 을 적은뒤 엔터를 치면 대괄호 [a,a,a]가 나온다
대괄호는 배열이라고 생각하면된다 정확한 결과가 아니라 nodelist를 출력하기는 하지만 배열이라고 생각하면된다

a list라고하는 변수에 담고 console.log를 하면 괄호안의 결과가
console 창에서 출력된다
0을 하면 첫번째 태그 , 1을 하면 두번째 태그가 선택되게 한다
그리고 length는 몇개의 a태그를 찾았는지를 가르쳐준다

이 점에 착안해서 반복문을 사용해서 alist라고하는 변수에 담겨있는 태그들을 하나하나 꺼내서 스타일 속성을 지정 할 수 있다

1 코드 짜는 순서

var alist = document.querySelectorAll('a');
먼저 alist에 a태그들의 목록을 담고 있는 배열을 담았다
while문으로 반복문을 작성해보자
var i = 0; 반복문의 시작에 i의 값을 0으로 세팅한다음
i = i + 1; 을 시키고
while(i < alist.length){   
alist의 값이 alist의 length 개수보다 작은동안 반복한다라는 코드를 넣었다
console.log(alist[i]);
이렇게 넣게되면 반복문이 실행될때마다 a태그를 하나하나 가져올수있게된다
잘 실행되는지 알기 위해서 console.log (콘솔에 출력해 주는 함수)를 사용해보자

이렇게 되면 사진과 같이 모든 태그를 화면에 출력할 수 있게 된다

위쪽 화살표키를 누르면 다시 타이핑 할 필요없이 나타난다

2 적용

alist[i].style.color = 'powerblue';
반복문이 진행될 때마다 원소에 들어있는 a태그를 가리키고
스타일 컬러를 powerblue로 하는 줄을 넣어주고
작동을하면 a태그들의 스타일 값이 powerblue로 바뀌는 것을 볼수있다
코드를 그대로 카피해서 필요없는 부분을 지우고 넣어주자
console.log(alist[i]);는 더이상 필요가 없다

    <input type="button" value="night" onclick="
    var target = document.querySelector('body');
    if(this.value === 'night' ){
      target.style.backgroundColor = 'black';
      target.style.color = 'white';
      this.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';
      this.value = 'night';

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

3 결과

태그가 잘 동작하는 것을 볼 수 있다
반복문이라는 것을 사용하면 많은 일을 손쉽게 할수 있게 되고
컴퓨터는 많은경우에 서로 연관된 데이터를 배열의 형태로 돌려주기 때문에
예를들면 document.querySelectorAll 이런 것 처럼
이런 명령은 일종의 배열의 형태로 우리에게 결과를 주기때문에
이런 속성이 있기때문에 배열과 반복문은 정말 중요한 기능이다