배열과 반복문의 활용

querySelectorAll();을 이용

예시) 주/야간모드 토글버튼 : 전체 a태그의 색상변환

before

<h1><a href="index.html">AllLinksChangeColor</a></h1>

  <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';
        
    } else {
        target.style.backgroundColor = 'white';
        target.style.color = 'white';
        this.value = 'night';
    }
  ">
  
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>

after

<h1><a href="index.html">AllLinksChangeColor</a></h1>

  <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 = 'white';
        this.value = 'night';
        
        var alist = document.querySelectorAll('a');
        var i = 0;
        while(i < alist.length){
            alist[i].style.color = 'blue';
            i = i + 1;
        }
    }
  ">
  
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>

querySelector(); - 한 번에 한 개의 데이터만 불러옴

querySelectorAll(); - 조건의 모든 데이터를 불러옴